@import '~styles/variables.less';

.TeamForm {
  max-width: 660px;
  padding: 0 1rem;
  width: 100%;
  margin: 0 auto;

  &-pending,
  &-add {
    margin-top: 2rem;

    &-title {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      padding-left: 0.25rem;
    }
  }

  &-pending {
    &-invite {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      font-size: 1rem;
      background: #FFF;
      box-shadow: 0 1px 2px rgba(#000, 0.2);
      border-bottom: 1px solid rgba(#000, 0.05);

      &:first-child {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
      }

      &:last-child {
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom: 0;
      }

      &-delete {
        opacity: 0.3;
        outline: none;
        font-size: 1rem;
        padding: 0 0.25rem;
        transition: opacity 100ms ease, color 100ms ease;

        &:hover,
        &:focus,
        &:active {
          color: @error-color;
          opacity: 1;
        }
      }
    }
  }

  &-add {
    &-form {
      display: flex;
      padding: 1rem 1rem 0.3rem;
      border-radius: 2px;
      background: #FFF;
      box-shadow: 0 1px 2px rgba(#000, 0.2);

      &-field {
        flex: 1;

        .ant-form-explain {
          margin-top: 0.3rem;
          padding-left: 0.25rem;
          font-size: 0.75rem;
        }
      }

      &-submit {
        margin-left: 0.5rem;
      }
    }
  }
}