@import 'mixins/buttons';
@import 'mixins/list';
@import 'variables/gutters';

.my-account {
  &__heading-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &__logout {
    @include msfa__button('secondary');
  }

  &__contents {
    display: flex;
    flex-direction: column;
    gap: $digi--layout--gutter--l;
    margin-top: $digi--layout--gutter--l;
  }

  &__block {
    max-width: var(--digi--typography--text--max-width);
  }

  &__list {
    @include msfa__reset-list;
    display: flex;
    flex-direction: column;
    gap: $digi--layout--gutter--s;
  }

  &__list-item {
    display: flex;
    align-items: center;
    gap: $digi--layout--gutter--s;
  }

  &__authorization-icon {
    &--authorized {
      color: var(--digi--ui--color--border--success);
    }

    &--unauthorized {
      color: var(--digi--ui--color--border--error);
    }
  }
}
