ihk24/gfi-ihk-2024/stories/components/search-results/search-results.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.search-results {
  .results-wrapper {
    margin: 30px 0;
    position: relative;

    &:last-child {
      margin-bottom: calc(1.4 * var(--section-margin));
    }

    @media(max-width: 767px) {
      margin: var(--container-padding) 0;
    }

    &:before {
      font-family: "Icons", sans-serif;
      position: absolute;
      font-size: var(--icon-size);
      line-height: 1;
      right: 0;
      top: 0;
      margin: 28px 26px;

      @media(max-width: 767px) {
        margin: 22px var(--container-padding);
      }
    }

    &.no-border {
      .result {
        border: 1px solid var(--theme-color-primary-dimmed-03);
        border-radius: var(--border-radius-xs);
        padding: 12px 16px;
        font-size: var(--font-size-small);
        background-color: var(--theme-color-white);

        @media(max-width: 767px) {
          padding: 10px 12px;
        }

        + .result {
          margin-top: 10px;
        }

        &:not(.fitResult){
          a {
            display: block;
            text-decoration: none;
            transition: 0.2s ease;

            &:before {
              content: "";
              @include full-size;
              pointer-events: none;
              @include focus-standalone;
              border-radius: var(--border-radius-xs);
              opacity: 0;
              transition: 0.3s ease;
            }

            &.focus-visible:focus {
              outline: 0;

              &:before {
                opacity: 1;
              }
            }

            &:focus-visible, &.-moz-focusring {
              outline: 0;

              &:before {
                opacity: 1;
              }
            }

            &:hover {
              color: var(--theme-color-link-hover);
            }
          }
        }
      }
    }

    h3 {
      margin-top: 0.1em;
    }

    .highlight {
      font-weight: 700;
    }

    .result {
      position: relative;
      display: block;
      transition: 0.3s ease;

      @media(max-width: 767px) {
        overflow: hidden;
      }

      &:before {
        position: absolute;
        top: 0;
        right: 0;
        margin: 10px 8px;
        font-family: 'Icons', sans-serif;
        font-size: var(--icon-size-small);
        line-height: 1;
        text-align: center;

        @media(max-width: 567px) {
          margin: 8px;
        }
      }

      &.download::before {
        @include icon-small-download;
      }

      &.external::before {
        @include icon-small-link-external;
      }

      p:last-child {
        margin: 1px 0;
        line-height: 1.4;
      }

      &:hover {
        color: var(--theme-color-secondary-intensed);
      }
    }

    .h-kicker {
      @include kicker;
      margin-bottom: 1px;
    }

    .title, .h-title {
      text-decoration: underline;
      font-size: var(--font-size-copy);
      margin-bottom: 5px;
      font-weight: 600;
      line-height: 1.25;

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      &:first-child:last-child {
        margin: 5px 0;
      }

      &:not(:first-child):last-child {
        margin-bottom: 4px;
      }
    }

    .fitResult{
      .title, .h-title {
        &:after {
          display: none;
        }
      }
    }

    .results {
      list-style: none;
      margin-bottom: 24px;
      padding: 0;

      li {
        margin: 10px 0;
      }

      a {
        display: block;
        background-color: var(--theme-color-white);
        border-radius: var(--border-radius-xs);
        padding: 10px 20px;
        transition: 0.3s ease;
        @include focus-visible();

        &:hover {
          color: var(--theme-color-link-hover);
        }

        @media(max-width: 767px) {
          padding: 6px 12px;
        }
      }

      .fitResult {
        display: block;
        background-color: var(--theme-color-white);
        border-radius: var(--border-radius-xs);
        padding: 10px 20px;

        a{
          padding: 0;
        }
      }
    }

    .more-wrapper {
      margin: 24px 0 12px;
      text-align: right;

      strong {
        display: inline-block;
        margin: 0 5px;
      }
    }

    &:not(.no-border) {
      background-color: var(--theme-color-primary-dimmed-04);
      padding: 18px 28px;

      @media(max-width: 767px) {
        margin: var(--container-padding) calc(var(--container-padding) * -1);
        padding: 15px var(--container-padding);
      }

      .result {
        margin: 10px 0;
        display: block;
      }
    }

    &.events-list + .events-list, &.events-list + #infscr-loading + .events-list,
    &.events-list + .events-list, &.events-list + #infscr-loading + .events-list,
    #dummy-wrapper + .results-wrapper.events-list, #dummy-wrapper + #infscr-loading + .results-wrapper.events-list {
      margin-top: -50px;
      padding-top: 0;

    }

    &.no-border + .no-border, &.no-border + #infscr-loading + .no-border,
    &.no-border + .no-border, &.no-border + #infscr-loading + .no-border,
    #dummy-wrapper + .results-wrapper.no-border, #dummy-wrapper + #infscr-loading + .results-wrapper.no-border {
      margin-top: -20px;
    }
  }
}