@use 'sass:math';

@import '~styles/config';

.profileListItem {
  @include reset-anchor;
  display: flex;
  align-items: center;

  padding: math.div($gutter, 3) 0;
  border-bottom: 1px solid $color-grey100;

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

  &:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  &:hover &__arrowSVG,
  &:focus &__arrowSVG {
    fill: $color-dark;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    @include colorify('background-color');

    cursor: pointer;

    &.disabled {
      background-color: $color-grey500;
    }
  }

  &__svg {
    height: 16px;
    width: 14px;
    max-height: 16px;
    max-width: 14px;

    fill: $color-white;
  }

  &__labelWrapp {
    display: block;

    padding: 0 $gutter * 0.5;
    width: calc(100% - 60px);
    line-height: 17px;
  }

  &__name {
    display: block;
    font-size: 12px;
    font-weight: 600;
  }

  &__rateplan {
    font-size: 12px;

    &Dash {
      padding: 0 4px;
    }
  }

  &__title {
    white-space: nowrap;
  }

  &__arrow {
    width: 24px;
  }

  &__arrowSVG {
    transform: rotate(270deg);
    fill: $color-grey400;
  }

  // *******************************
  // Styles for ProfileBoxItemLoading

  &.loading &__head {
    padding: 40px $gutter 35px;
    cursor: auto;
  }

  &.loading &__title {
    @include loadingText(28, 130);
  }

  &.loading &__rateplan {
    @include loadingText(15, 180);
    margin: 10px 0 0 $gutter * 0.5;
  }
}