@import '../../../styles/core.scss';

.ShowMore {
  $root: #{&};
  $offset: ms(-3);

  position: relative;
  box-sizing: border-box;
  min-height: 3em;

  &[open] {
    #{$root}-toggle {
      position: sticky;
      bottom: $offset;
      background: transparent;
    }
  }

  &-toggle {
    box-sizing: border-box;
    padding: $offset 0;
    outline: none;
  }

  &_fade {
    #{$root}-toggle {
      order: 1;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: flex-end;  
      justify-content: center;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, transparent, white 90%);
      cursor: pointer !important;
    }
    &:not([open]) {
      max-height: 33vh;
      overflow: hidden;
      >:not([class*=ShowMore]) {
        opacity: .7;
      }
    }
    &[open] {
      #{$root}-toggle {
        background: linear-gradient(to bottom, transparent, white 90%);
        bottom: 0;
        padding: $offset 0;
      }
    }
  }

  &:not(#{&}_fade) {
    &:not([open]) {
      >:not(#{$root}-toggle) { display: none !important }
    }
  }
}