/*

#############################
### ORGANISM: agenda ########
#############################

*/


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

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


.#{organism('agenda')} {
  @include agenda-list-shadow;

  grid-column: 5 / 21;
  background: color('white');
  border-radius: 4px;
  flex: 1 1 auto;

  &-block {
    width: 100%;

    @media (min-width: 768px) {
      grid-template-columns: repeat(16, 1fr);
      display: grid;
      grid-gap: 30px;
    }
  }

  &-selector {

    &-button {
      @include hl;
      @include hl-h3;
      padding: 10px 30px 15px;
      margin-bottom: 0;
      flex-grow: 1;
      color: fade_out(color('charade'), 0.57);
      background: color('athens-gray');

      small {
        display: block;
        font-size: 12pt;
      }

      &+.#{organism('agenda')} {
        display: none;
      }

      &[option][selected] {
        @include agenda-button-shadow;
        border: none;
        color: color('white');
        background: color('bittersweet');
        border-radius: 4px 4px 0 0;

        &+.#{organism('agenda')} {
          display: block;
          order: 1;
        }

      }

      &.ampcs[option][selected] {
        background: color('charade');
      }

      &.ampcs {
        flex: 1 1 33%;
      }
    }
  }

  &-content {
    padding: 50px 20px;

    @media (min-width: 768px) {
      grid-column: 3 / 14;
      padding: 50px 0px;
    }

    &-headline {
      @include hl;
      @include hl-h2;
    }

    &-sub-text {
      @include txt;
      @include txt-1;
      padding-bottom: 25px;

      & span {
        @include txt-strong;
      }
    }

    &-list {
      list-style: none;
      padding-left: 0;

      &.conf {
        grid-column: 5 / 22;
        padding: 50px 0 100px;
      }
    }
  }

}
