ihk24/storybook/stories/components/contact/contact.scss

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

.contact-wrapper {
  position: relative;
  background-color: var(--theme-color-primary-dimmed-04);
  border-bottom: var(--border-width) solid var(--theme-color-secondary);
  padding: var(--content-box-padding);
  overflow: hidden;
  font-size: var(--font-size-small);
  margin: var(--section-margin) 0;

  > h2, > h3 {
    margin-top: var(--section-headline-margin);
  }

  h5, h6 {
    margin-top: 0.1em;
  }

  .image-box + .text-box {
    h5, h6 {
      margin-top: -0.3em;
      font-size: var(--font-size-copy);
    }
  }

  .contact-person {
    display: flex;
    margin: 0 calc((var(--content-box-padding) + var(--col-padding)) * -1);
  }

  &:not([data-tab-style="open"]) {
    .contact-person {
      position: absolute;
      top: 0;
      @include hide;
      transform: translate3d(0, 0, 0) scale(0.95);
      width: calc(100% + (var(--content-box-padding) + var(--col-padding)) * 2);

      &.active {
        position: relative;
        @include show(0.4s);
        transform: translate3d(0, 0, 0) scale(1);
        order: 1;
        z-index: 1;
      }
    }
  }

  .image-box, .text-box {
    flex: 1 1 100%;
    padding: 0 var(--col-padding);
  }

  p, .text {
    margin-bottom: 0.4em;
  }

  .contacts {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: height 0.3s $easeOutQuad;
  }

  .contact-buttons, .tab-buttons {
    padding: 0;
    list-style: none;
    margin: 1.1em -0.3em 0;

    li {
      margin: 0 0.3em 0.6em;
    }

    .btn {
      margin-left: -0.06em;
    }
  }

  .contact-buttons li:last-child {
    margin-bottom: 0;
  }

  .tab-buttons {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.3em 1.2em;

    .btn {
      /*
      --button-min-size: 38px;
      --button-padding: 8px 14px;
      font-size: var(--font-size-small);
      border-radius: var(--border-radius-sm);
      */

      &::after {
        display: none;
      }
    }

    li:not(.active) .btn:not(:hover) {
      background-color: var(--theme-color-primary-dimmed-03);
      color: var(--theme-color-primary);
    }
  }

  img {
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    opacity: 1;

    &.loading {
      opacity: 0;
    }
  }

  &[data-size='lg'] {
    .image-box {
      max-width: 33.333333%;
      padding-left: calc(var(--content-box-padding) + var(--col-padding));
    }

    .text-box {
      padding-right: calc(var(--content-box-padding) + var(--col-padding));

      &:first-child {
        padding-left: calc(var(--content-box-padding) + var(--col-padding));
        max-width: 880px;
      }
    }
  }

  &[data-size='md'] {
    .image-box {
      padding-left: calc(var(--content-box-padding) + var(--col-padding));
    }

    .text-box {
      min-width: calc(100% - 360px - var(--content-box-padding) * 2);
      padding-right: calc(var(--content-box-padding) + var(--col-padding));

      &:first-child {
        padding-left: calc(var(--content-box-padding) + var(--col-padding));
      }
    }
  }

  &[data-size='sm'] {
    padding: calc(var(--content-box-padding) * 2) var(--content-box-padding);

    .image-box {
      margin-bottom: 1em;
    }

    .contact-person {
      flex-direction: column;
      padding: 0 var(--content-box-padding);
    }

    .tab-buttons {
      margin-bottom: 0.8em;
    }
  }
}

.sidebar .contact-wrapper h2 {
  margin-top: var(--section-headline-margin);
  margin-bottom: 0.6em;
}