@import "settings.breakpoints";
@import "settings.z-index";

@import "mixins/tools.mixins";
@import "mixins/settings.fonts";

// height of pencil
$pencil-height-sm: rem(40); //desktop: collapsed;
$pencil-height-md: rem(48); // mobile: expanded
$pencil-height-lg: rem(88); // desktop: expanded

// primacy colors
$pencil-primary-bg: #9f905c;
$pencil-primary-border: $color-grey-200;
$pencil-primary-color: $color-white;

// secondary colors
$pencil-second-bg: #fffce8;
$pencil-second-color: $color-grey-800;

.o-sub-pencil {
  z-index: $z-index-sub-pencil;
  width: 100%;
  position: fixed;
  padding: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.o-sub-pencil__box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  margin: 0 auto;
  max-width: $max-container-width-desktop;
  min-width: $break-mobile;
  position: relative;
}

.o-sub-pencil__tier {
  flex-grow: 1;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
}

.o-sub-pencil__icon--sm {
  display: flex;
  flex: 0 0 5%;
}

.o-sub-pencil__icon--lg {
  position: absolute;
  left: 0;
  bottom: rem(6);
}

.o-sub-pencil__icon__art {
  display: block;
  margin: 0;
  padding: 0;
  fill: $pencil-primary-color;
}

.o-sub-pencil__icon__art--sm {
  width: rem(18);
  margin-left: rem(12);
}

.o-sub-pencil__icon__art--lg {
  width: rem(18);
  height: rem(18);
}

.o-sub-pencil__offer {
  flex-basis: 65%;
  text-decoration: none;
  letter-spacing: rem(1);
  white-space: nowrap;
  font-size: rem(12);
  text-transform: uppercase;
  color: $pencil-primary-color;
  padding: 0;
  margin: 0 2%;
  @include font-gm-sans-bold;
}

.o-sub-pencil__offer__try-xs {
  font-size: rem(15);
  color: $pencil-primary-color;
  text-transform: none;
}

.o-sub-pencil__offer__cost-xs {
  font-size: rem(15);
  letter-spacing: rem(0.5);
  line-height: rem(17);
}

.o-sub-pencil__offer__time-xs {
  font-size: rem(12);
  text-transform: none;
}

.o-sub-pencil__offer__cost-sm {
  font-size: rem(12.96);
}

.o-sub-pencil__cta {
  flex-basis: 30%;
  display: flex;
  align-items: center;
}

// CTA button
.o-sub-pencil__cta__btn {
  @include remove-button-appearance;
  @include font-gm-sans-bold;
  margin: 0 auto;
  padding: rem(9) rem(32);
  border: 1px solid;
  border-radius: rem(2);
  transition: background-color 0.25s ease-out;
  font-size: rem(14);
  min-height: rem(32);
  line-height: 1;
  letter-spacing: rem(1);
  vertical-align: middle;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  &:active {
    transition-duration: 0s;
    transition-timing-function: unset;
  }
}
// Normally we wouldn't use an element selector in the "components" layer of
// the ITCSS pyramid, but line-height is inconsistent between <button> vs <a>
// elements, in some browsers
a.o-sub-pencil__cta__btn {
  line-height: normal;
}

// CTA btton mustard color
.o-sub-pencil__cta__btn--mustard {
  border-color: rgba(51, 51, 51, 0.48);
  background-color: $color-mustard;
  color: $color-grey-800;
  &:hover,
  &:focus {
    background-color: darken($color-mustard, 10%);
    color: $color-grey-800;
  }
  &:active {
    background-color: darken($color-mustard, 20%);
    color: $color-grey-900;
  }
}

.o-sub-pencil__control {
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  height: $pencil-height-md;
  width: $pencil-height-md;
  margin: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  text-decoration: none;
}

.o-sub-pencil__control--lg {
  display: none;
}

.o-sub-pencil__button {
  appearance: none;
  background-color: transparent;
  border: none;
  color: $color-white;
  cursor: pointer;
  display: flex;
  align-items: center;
  align-self: center;
  font-size: rem(14);
  margin: 0 auto;
  letter-spacing: rem(1);
  height: 100%;
  width: 100%;
  line-height: 1;
  overflow: visible;
  padding: 0;
  vertical-align: middle;
  justify-content: center;
  text-decoration: none;
  position: relative;
  @include font-gm-sans-bold;

  @include mobile-only {
    font-size: rem(12);
  }

  &:hover, &:focus {
    z-index: $z-index-focused-pencil-button;
    background-color: $color-grey-800;
  }

  &:active {
    background-color: $color-grey-900;

    .o-sub-pencil__button__icon {
      fill: $color-grey-300;
    }
  }
}

.o-sub-pencil__button__icon {
  display: block;
  height: 50%;
  width: 50%;
  margin: 25%;
  padding: 0;
  fill: $color-white;
  vertical-align: middle;

  .o-sub-pencil__control:active &,
  .o-sub-pencil__control:visited & {
    color: $color-grey-300;
    fill: $color-grey-300;
  }
}

.o-sub-pencil__access {
  flex: 0 0 35%;
  display: flex;
  flex-flow: row;
  align-items: center;
  height: $pencil-height-lg;
}

.o-sub-pencil__access__cta {
  flex: 1 0 70%;
  height: 100%;
  text-align: center;
}

.o-sub-pencil__access__cta-text {
  height: 50%;
  max-width: rem(240);
  letter-spacing: rem(1);
  padding-top: rem(20);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 auto;
  font-size: rem(13.6);
  line-height: rem(16.32);
  color: $pencil-primary-color;
  position: relative;
  @include font-gm-sans-bold;
}

.o-sub-pencil__access__cta-btn {
  display: block;
  max-width: rem(240);
  margin: 0 auto;
  background: $color-grey-800;
  padding: rem(6.4) rem(4.8);
  color: $color-white;
  font-size: rem(11.52);
  line-height: rem(13.824);
  letter-spacing: rem(1);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  @include font-gm-sans;

  &:hover,
  &:focus {
    background-color: $color-grey-700;
  }

  &:active {
    background-color: $color-grey-800;
  }
}

.o-sub-pencil__access__art {
  flex: 0 0 30%;
  height: 100%;
}

.o-sub-pencil__access__art-img {
  margin-top: rem(8);
  width: rem(130);
}

.o-sub-pencil__cost {
  flex: 0 0 65%;
  height: $pencil-height-lg;
  background-color: $pencil-second-bg;
  color: $pencil-second-color;
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  align-items: center;
}

.o-sub-pencil__cost__just {
  flex: 0 0 40%;
  font-size: rem(48);
  letter-spacing: rem(1);
  text-align: center;
}

.o-sub-pencil__cost__just-text {
  padding: 0 rem(8);
  text-transform: uppercase;
  @include font-gm-sans;
}

.o-sub-pencil__cost__just-price {
  @include font-pratt;
}

.o-sub-pencil__cost__per {
  flex: 0 0 23%;
  text-align: left;
  font-size: rem(10.4);
  letter-spacing: rem(1);
  @include font-gm-sans;
}

.o-sub-pencil__cost__cta {
  flex: 0 0 37%;
  text-align: left;
}

.o-sub-pencil__cost__text {
  font-size: rem(14);
  line-height: rem(14);
}

// XXS < 480px
@include mq($until: 480px) {
  .o-sub-pencil__cta {
    display: none;
  }
}

// XS >= 480px
@include mq($from: 480px) {
  .o-sub-pencil__offer__cost-xs,
  .o-sub-pencil__offer__try-xs {
    font-size: rem(16);
    letter-spacing: rem(0.5);
    line-height: rem(18);
  }

  .o-sub-pencil__offer__time-xs {
    font-size: rem(13);
  }
}

// XS < 768px
@include mq($until: tablet) {
  .o-sub-pencil__icon,
  .o-sub-pencil__tier--lg,
  .o-sub-pencil__control--lg {
    display: none;
  }

  .o-sub-pencil__cta__btn--sm {
    display: none;
  }

  .o-sub-pencil__button {
    background: rgba(51, 51, 51, 0.56);
  }

  .o-sub-pencil--closed {
    display: none;
  }

  .o-sub-pencil__offer__try-sm,
  .o-sub-pencil__offer__cost-sm {
    display: none;
  }

  .o-sub-pencil__box {
    height: $pencil-height-md;
  }

  .o-sub-pencil__offer {
    padding-top: rem(6);
  }

  .o-sub-pencil--open {
    .o-sub-pencil__tier--sm {
      display: flex;
    }

    .o-sub-pencil__control--sm {
      transform: rotate(90deg); // will look like: nav-arrow-right
    }

    .o-sub-pencil__box {
      border-top: 1px solid $pencil-primary-border;
      background-color: $pencil-primary-bg;
    }
  }
}

// SM >= 768px
@include mq($from: tablet) {
  //Hide text that is for mobile/tablet only
  .o-sub-pencil__offer__try-xs,
  .o-sub-pencil__offer__cost-xs {
    display: none;
  }

  .o-sub-pencil__button {
    background: rgba(51, 51, 51, 0.56);
  }

  .o-sub-pencil__control {
    width: $pencil-height-sm;
    height: $pencil-height-sm;
  }

  .o-sub-pencil__control--sm {
    display: none;
  }

  .o-sub-pencil__cta__btn--sm {
    padding: rem(8) rem(25.6);
  }

  .o-sub-pencil__cta__btn--lg {
    padding: rem(9) rem(22.4);
    min-height: rem(36.8);
  }

  .o-sub-pencil__cta__text {
    font-size: rem(12.8);
    line-height: rem(12.8);
  }

  .o-sub-pencil__offer {
    display: flex;
    padding-left: rem(10);
    margin: 0;
  }

  .o-sub-pencil__offer__try {
    flex-basis: 40%;
  }

  .o-sub-pencil__offer__cost {
    flex-basis: 60%;
    padding-left: rem(12);
  }

  .o-sub-pencil__offer__try-sm,
  .o-sub-pencil__offer__cost-sm {
    height: $pencil-height-sm;
    line-height: $pencil-height-sm;
    text-align: left;
    vertical-align: middle;
    font-size: rem(12.8);
  }

  .o-sub-pencil__box {
    border-top: 1px solid $pencil-primary-border;
    background-color: $pencil-primary-bg;
  }

  .o-sub-pencil__control--lg {
    display: block;
  }

  .o-sub-pencil--open {
    .o-sub-pencil__box {
      height: $pencil-height-lg;
    }

    .o-sub-pencil__tier--lg {
      display: flex;
    }

    .o-sub-pencil__control--lg {
      transform: rotate(180deg); // will look like: nav-arrow-down
      position: absolute;
      top: 0;
      right: 0;
      z-index: $z-index-sub-pencil + 1;
    }

    .o-sub-pencil__button {
      background: rgba(197, 197, 197, 0.48);

      &:hover, &:focus {
        background-color: $color-grey-800;
      }

      &:active {
        background-color: $color-grey-900;
      }

      &:hover, &:focus, &:active {
        .o-sub-pencil__button__icon {
          fill: $color-white;
        }
      }

      .o-sub-pencil__button__icon {
        fill: $color-grey-800;
      }
    }
  }

  .o-sub-pencil--closed {
    .o-sub-pencil__box {
      height: $pencil-height-sm;
    }

    .o-sub-pencil__tier--sm {
      display: flex;
    }
  }
}

// MD < 1023px
@include mq($until: tabletWide) {
  .o-sub-pencil__access__art {
    display: none;
  }
}

// LG >= 1023px
@include mq($from: tabletWide) {
  .o-sub-pencil__offer__try-sm,
  .o-sub-pencil__offer__cost-sm {
    font-size: rem(14.72);
  }

  .o-sub-pencil__access {
    flex-basis: 43%;
  }

  .o-sub-pencil__cost {
    flex-basis: 57%;
  }

  .o-sub-pencil__access__cta-text {
    max-width: rem(270);
    font-size: rem(16);
    line-height: rem(19.2);
  }

  .o-sub-pencil__access__cta-btn {
    max-width: rem(270);
    font-size: rem(13.12);
    line-height: rem(15.744);
  }

  .o-sub-pencil__cost__just {
    font-size: rem(56);
  }

  .o-sub-pencil__cost__just-text {
    padding: 0 rem(10.4);
  }

  .o-sub-pencil__cost__per {
    font-size: rem(12);
  }

  .o-sub-pencil__box {
    border-left: 1px solid $pencil-primary-border;
    border-right: 1px solid $pencil-primary-border;
    border-radius: 2px 2px 0 0;
  }
}
