@use "sass:math";

@import '~styles/config';

.profileList {
  display: flex;
  flex-grow: 1;
  flex-direction: column;

  &__header {
    display: flex;
    padding: $gutter 0;

    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: $color-grey100;

    @include responsive-font(13, 14);
    font-weight: 500;
    color: $color-grey500;
  }

  &__checkbox {
    @include colorify('color');
    display: flex;
    justify-content: center;
    align-items: center;

    width: 60px;

    cursor: pointer;
  }

  &__titles {
    width: calc(100% - 100px);

    @media (min-width: $min-tablet) {
      display: flex;
    }

    &.noSelection {
      width: calc(100% - 40px);
    }

    &.noEdit {
      width: 100%;
    }
  }

  &__profiles {
    @media (min-width: $min-tablet) {
      padding: 0 24px;
      width: percentage(math.div(5, 12));
    }
  }

  &__subscription {
    display: none;

    @media (min-width: $min-tablet) {
      display: block;
      padding: 0 8px;
      width: percentage(math.div(4, 12));
    }
  }

  &__servicePacks {
    display: none;

    @media (min-width: $min-tablet) {
      display: block;
      padding: 0 8px;
      width: percentage(math.div(5, 12));
    }
  }

  &__total {
    display: none;

    @media (min-width: $min-tablet) {
      display: block;
      padding: 0 24px 0 8px;
      width: percentage(math.div(3, 12));
      text-align: right;
    }
  }
}