/*

#######################
### TEMPLATE: tools ###
#######################

### INFO:

The page with all AMP tools.

*/
@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';

@import '../atoms/_color';
@import '../atoms/_headline';
@import '../atoms/_text';

@import '../molecules/copy';

@import '../templates/_default';

@import '../organisms/tools-teaser';

.#{utility('stage')} {
  .#{organism('stage')} {
    margin-bottom: 50px;

    &-content {
      margin: 15em 0 2em;
      @media (min-width: 768px) {
        margin: 7vw 0 11vw;
      }
    }
  }

  & + .#{utility('content')} {
    @media (min-width: 768px) {
      margin-top: -15%;
    }

    h1 {
      @include hl-xxlrg;
    }
  }

}

.#{utility('container')} {
  @include container;
}

.#{utility('container-fluid')} {
  @include container-fluid;
}

.#{utility('content')} {
  @include default-section-padding;
}

.#{utility('stage')} {
  overflow: visible;
}

section.#{utility('tools')} {
  padding: 0 25px;

  .#{organism('tool-section')} {
    margin-bottom: 3em;
    padding: 0 30px;

    @media (min-width: 768px) {
      margin-top: 4em;
    }

    &-title { grid-column: 1 / -1; }
    &-title > h2 { opacity: 0.35; }
    &-title > .show ~ .hide ~ h2, .show + h2 { opacity: 1; }
  }

  .#{organism('tool-format-filter-container')} {
    grid-row-gap: 0;
    margin-top: 0;
  }

  .#{organism('tool-format-filter-caption')} {
    grid-column: 1 / -1;
  }

  .#{organism('tool-format-filter')} {
    grid-column: 1 / -1;
    list-style: none;
    padding: 0;
    margin: 0 -8px;

    li {
      display: inline-block;
      margin: 10px 8px;
    }
  }

  .#{atom('pill')} {
    position: relative;
    display: inline-block;
    padding: 5px 20px;
    margin: 0;
    font-size: 12px;
    font-family: 'Noto Sans', system;
    color: color('iron');
    background: color('white');
    transition: 200ms;
    box-shadow: 0 5px 25px 0px rgba(0,0,0,0.25);

    &:hover {
      box-shadow: 0 15px 35px 0px rgba(0,0,0,0.15);
    }

    &.websites .#{atom('ico')} { fill: #CCC; font-size: 21px; }
    &.ads .#{atom('ico')} { fill: #CCC; font-size: 19px; }
    &.stories .#{atom('ico')} { fill: #CCC; font-size: 19px; }
    &.email .#{atom('ico')} { fill: #CCC; font-size: 19px; }

    &.chosen {
      padding-left: 12px;
      padding-right: 28px;
    }

    &.hover,
    &.active {
      &.websites {
        @include gradient-websites;
        @include color-websites;

        .#{atom('ico')} {
          @include fill-websites;
        }
      }

      &.stories {
        @include gradient-stories;
        @include color-stories;

        .#{atom('ico')} {
          @include fill-stories;
        }
      }

      &.ads {
        @include gradient-ads;
        @include color-ads;

        .#{atom('ico')} {
          @include fill-ads;
        }
      }

      &.email {
        @include gradient-e-mails;
        @include color-e-mails;

        .#{atom('ico')} {
          @include fill-e-mails;
        }
      }
    }

    &-icon {
      display: inline-flex;
      margin: 0 2px 2px 0;
      vertical-align: middle;
    }

    &-text {
      margin-right: 8px;
    }

    &-reset {
      overflow: hidden;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: absolute;
      width: 0;
      height: 100%;
      top: 0;
      right: 0;

      svg {
        width: 8px;
        height: 8px;
        margin: 1px -10px 0 0;
        opacity: 0;
        transition: 200ms;
      }

      &.show {
        width: 100%;

        svg {
          margin-right: 10px;
          opacity: 1;
        }
      }
    }
  }

  h1, h2 {
    @include hl;
    @include hl-h1;
    margin-top: 0;
  }
}
