@import '_extends.scss';
@import '_functions.scss';
@import '_mixins.scss';
@import '_variables.scss';

@import '../atoms/_text.scss';

$height: 42px;

.#{molecule('format-filter-hint')} {
  $root: &;

  &-banner {
    display: none;
  }

  &.amp-active ~ &-banner {
    height: $height;
    max-width: 2020px;
    margin: 0 auto;
    color: color('white');
    background-color: color('charade');
    @include txt-2;
    z-index: 100;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;

    @media (min-width: 768px) {
      display: block;
    }

    #{$root}-banner {
      &-content {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        max-width: 1440px;
        padding: 0 30px;
        margin: 0 auto;

        @media (min-width: 1024px) {
          padding: 0 15px;
        }

        &:after {
          position: absolute;
          content: "";
          top: 42px;
          left: 50px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 8px 10px 0;
          border-color: color('charade') transparent transparent;
        }
      }

      &-note {
        flex: 1 0;
        padding-right: 10px;
      }

      &-dismiss {
        height: 20px;
        width: 20px;
        background-color: transparent;
        border: 0;
        cursor: pointer;
        padding: 3px;

        svg {
          fill: color('white');
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
