ihk24/storybook/stories/components/steps/steps.scss

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

.steps {
  position: relative;
  display: block;
  margin: var(--section-margin) 0;
  padding: var(--content-box-padding) 0;
  background-color: var(--theme-color-primary-dimmed-04);

  @media(max-width: 567px) {
    padding: calc(var(--content-box-padding) * 2) 0;
  }

  > h3, > h2 {
    margin: var(--section-headline-margin) calc(var(--content-box-padding) - 0.05em) 0;
    padding-bottom: 20px;

    @media(max-width: 767px) {
      padding-bottom: var(--content-box-padding);
    }
  }

  .slider::before {
    content: '';
    display: block;
    height: 1px;
    background-color: var(--theme-color-primary-dimmed-02);
    margin: 0 var(--content-box-padding);
  }

  .slide {
    padding: 24px var(--content-box-padding);

    @media(max-width: 767px) {
      padding: var(--content-box-padding);
    }

    &:not(.current) {
      height: 1px;
    }

    > *:last-child {
      margin-bottom: 0.1em;
    }

    > *:first-child {
      margin-top: 0;
    }

    h4 {
      margin-bottom: 0.6em;
    }
  }

  .prev, .count {
    display: none;
  }

  .next {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: var(--content-box-padding);

    &:active, &:focus, &:active:focus {
      color: var(--theme-color-white);
      outline: 0;
    }
  }

  .slider-tabs {
    list-style: none;
    padding: 32px 0 0;
    margin: 0 var(--content-box-padding);
    border-top: 1px solid var(--theme-color-primary-dimmed-02);

    @media(max-width: 767px) {
      padding-top: calc(var(--content-box-padding) * 1.5);
    }

    li {
      margin: 0 0 8px;

      &:last-child {
        margin: 0;
      }
    }

    .btn {
      --button-min-size: 38px;
      --button-padding: 8px 20px;
      background-color: var(--theme-color-primary-dimmed-03);
      color: var(--theme-color-primary);
      margin: 0;

      &::after {
        display: none;
      }
    }

    li.active .btn, .btn:hover {
      background-color: var(--theme-color-primary);
      color: var(--theme-color-white);
    }
  }

  @media(max-width: 567px) {
    .controls {
      .next {
        position: relative;
        margin: 20px var(--content-box-padding) 4px;
        float: right;
      }
      &:after {
        content: "";
        position: relative;
        display: block;
        clear: both;
      }
    }
  }
}