profile.module.scss

@use 'sass:map';
@use 'styles/config';
@use 'styles/common';

.wrapper {
  @include common.wrapper;
  margin: 48px auto;

  .card {
    border: 1px solid map.get(config.$colors, 'accents-2');
    border-radius: 4px;
    position: relative;

    .divider {
      @include common.divider;
    }

    .inputs {
      max-width: 500px;
      margin: 32px auto;
      padding: 0 16px;

      @media (max-width: 600px) {
        margin: 0 auto;
        padding: 16px;
      }

      .field {
        @include common.field;

        .label {
          margin-right: 24px;
          padding: 0;

          p {
            margin: 4px 0;

            &:first-child {
              margin-top: 0;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }

          .header,
          b {
            font-weight: 600;
          }
        }
      }

      .btn {
        margin: 8px 0 0;
        width: 100%;
      }

      .error {
        color: map.get(config.$colors, 'error');
        font-weight: 450;
        margin-top: 16px;
      }
    }

    .footer {
      display: flex;
      min-height: 54px;
      align-items: center;
      background-color: map.get(config.$colors, 'accents-1');
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-top: 1px solid map.get(config.$colors, 'accents-2');
      color: map.get(config.$colors, 'accents-6');
      font-size: 0.875rem;
      box-sizing: border-box;
      line-height: 1.6;

      .content {
        max-width: 500px;
        margin: 12px auto;
        padding: 0 48px;
        width: 100%;

        a {
          cursor: pointer;
          color: map.get(config.$colors, 'primary');
          text-decoration: none;
          display: inline-flex;
          align-items: center;
        }
      }
    }
  }
}

.snackbar {
  @include common.snackbar;
}