@import '~styles/config';

.usageBoxItem {
  @include reset-button;

  display: flex;
  flex-direction: column;
  position: relative;

  padding: $gutter;
  box-shadow: inset 0 0 0 0 transparent;

  &.clickable {
    cursor: pointer;

    &.selected,
    &:hover,
    &:focus {
      transition: box-shadow 220ms ease-in-out;
      @include box-shadow-selected();

      // @include box-shadow-colors;
      // @include colorify('border-bottom-color', 'box-shadow');
    }
  }

  &:not(:last-child) {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: $color-grey100;
  }

  &__usagePackTitle {
    @include responsive-font(18, 20);
    @include colorify();

    padding-right: $gutter;

    text-align: left;
    font-family: $font-heading;
    font-weight: 600;
  }

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

    position: absolute;
    top: 33px;
    right: 24px;

    margin: -10px -10px 0 0;

    height: 40px;
    width: 40px;

    &Svg {
      @include colorify('fill');
      transform: rotate(270deg);
    }
  }

  &__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    width: 100%;

    &Main {
      @include hasInfinite;
      @include responsive-font(28, 32);
      font-family: $font-heading;
      font-weight: 600;
    }

    &Price {
      @include responsive-font(12, 14);
      font-family: $font-heading;
      line-height: 32px;
      color: $color-grey700;
    }
  }

  &__info {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: $font-heading;

    &Label {
      @include responsive-font(12, 14);
      font-weight: 500;
      text-transform: uppercase;
    }

    &Value {
      @include responsive-font(12, 14);
      color: $color-grey;
    }
  }

  &__alert {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: $font-heading;

    &Label {
      @include responsive-font(12, 14);
      padding-right: 5px;
    }

    &Value {
      @include responsive-font(12, 14);
      @include colorify();
      font-weight: 600;
    }
  }

  // *******************************
  // Styles for RefillListItemLoading
  &.loading &__usagePackTitle {
    @include loadingText(18, 70);
    margin: 5px 0;
  }

  &.loading &__contentMain {
    @include loadingText(28, 140, 'dark');
    margin: 10px 0;
  }

  &.loading &__contentPrice {
    @include loadingText(18, 70);
    margin: 10px 0;
  }

}