/*

##################################
### MOLECULE: table component ###
##################################

### INFO:

*/

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

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

@import 'components/molecules/_teaser.scss';

.#{molecule('table-component')} {
  margin-bottom: 59px;

  &-container {
    background-color: color('white');
    margin-top: 40px;

    h4 {
      margin: 40px 0 18px;

      &:target::before {
        content: '';
        display: block;
        visibility: hidden;
        height: 250px;
        margin-top: -250px;
      }
    }
  }

  &-row {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    grid-column-gap: 10px;
  }

  @media (min-width: 768px) {
    &-row {
      display: grid;
      grid-template-columns: 2% 43% 55%;
      justify-content: start;

      &-components {
        display: grid;
        grid-template-columns: 15% 45% 40%;
        justify-content: start;
      }

      .ap-m-teaser-placeholder{
        align-self: center;
      }
    }
    &-name, &-header, &-copy, &-info, &-link {
      align-self: center;
    }
  }

  @media (min-width: 1024px) {
    &-row {
      &-components {
        grid-template-columns: 8% 40% 52%;
      }
    }
  }

  &-link {
    display: block;
    border-bottom: 1px solid transparentize(color('black'), 0.95);

    &:hover {
      background: color('athens-gray');
    }
  }

  &-link:nth-of-type(1) {
    border-top: 1px solid transparentize(color('black'), 0.95);
  }

  &-tags {
    @include teaser-tag-zero;

    & > .#{molecule('tag')}:not(:last-of-type) {
      margin-right: 5px;
    }
  }

  @media (min-width: 768px) {
    .#{molecule('tag')} {
      &:empty {
        min-width: 8px;
      }
    }
    &-tags {
      height: 8px;
      align-self: center;
      position: relative;

      & > .#{molecule('tag')} {
        border-radius: 50%;
        min-width: 8px;
        margin-right: 3px;
      }
    }
  }

  &-name {
    display: flex;
    justify-self: start;
    align-items: center;
    height: 100%;
    padding-top: 10px;
    background: none;

    &-title {
      margin: 0;
      @include txt-mono;
      font-size: 0.875em;
      font-weight: bold;
      color: color('river-bed');
    }
  }

  @media (min-width: 768px) {
    &-name {
      width: 100%;
      padding-left: 15px;
      padding-top: 0;
    }
  }

  &-info {
    padding: 11px 0;

    .#{molecule('table-component')}-used-components {
      code {
        color: color('charade');
      }
    }
  }

  &-copy {
    @include txt-3;
    display: block;
    margin: 0;
    line-height: 1.6em;
    font-weight: normal;
    color: color('river-bed');
  }

  &-components {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;

    .#{molecule('table-component')} {
      &-link {
        display: flex;
        width: 100%;
        border: none;

        @media (min-width: 768px) {
          width: calc(50% - 30px);
          margin-right: 30px;
        }

        &:nth-child(1), &:nth-child(2) {
          .#{molecule('table-component')} {
            &-row {
              border-top: 1px solid transparentize(color('black'), 0.95);
            }
          }
        }

        @media (min-width: 768px) {
          .#{molecule('tag')} {
            &:empty {
              min-width: 8px;
            }
          }
        }
      }
      &-row {
        grid-template-columns: 5% 85%;
        padding: 10px 0;
        border-bottom: 1px solid transparentize(color('black'), 0.95);
      }
    }
  }
}
