@import '../src/styles/palette.scss';
@import '../src/styles/variables.scss';
@import '../src/styles/mixins/index.scss';

.sb-show-main {
  flex-direction: column;

  #root,
  #portal {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: $font-family;

    .row,
    .container {
      min-width: 500px;
    }
  }

  .ebs-layout {
    position: relative;
    margin: -1rem;
    overflow: hidden;
  }

  > .ebs-select__input-wrapper {
    min-width: 50%;
  }

  .ebs-details__header__side-left {
    .row {
      min-width: unset !important;
    }
  }
}

.storybook-rows {
  display: flex;
  width: 50vw;
  min-width: 100%;
  max-width: 100%;

  .storybook-row {
    width: 100%;

    &:not(:last-child) {
      margin-right: rem(25px);
      padding-right: rem(25px);
      border-right: 1px solid $border-color;
    }

    .storybook-row-item {
      &.inline {
        display: flex;
        align-items: center;

        > *:first-child {
          min-width: rem(125px);
          margin-bottom: 0;
        }

        > *:not(:last-child) {
          margin-right: rem(50px);
        }
      }

      &:not(:last-child) {
        margin-bottom: rem(15px);
      }
    }
  }
}

.storybook-label {
  @include fontMedium;
  margin-bottom: rem(10px);
}

.storybook-header {
  @include fontBold;
  margin-bottom: rem(15px);
  font-size: rem(20px);
}

.storybook-flex {
  display: flex;

  > *:not(:last-child) {
    margin-right: rem(25px);
  }
}

.storybook-icon-items {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .storybook-icon-item {
    cursor: pointer;
    width: 18.486%;
    margin: rem(12.5px);
    padding: rem(22.5px 12.5px);
    border-radius: rem(8px);
    border: 1px solid $primary-100;
    text-align: center;

    .ebs-icon {
      font-size: rem($base-size);
    }

    .storybook-icon-name {
      font-size: rem(12px);
      color: $text-color-secondary;
      @include fontMedium;
      margin-top: rem(25px);
    }

    &:hover {
      .storybook-icon-name {
        color: $white;
      }
    }
  }
}

.docs-story .ebs-loader {
  > .ebs-loader__spinner.fixed {
    position: absolute;
  }
}

.ebs-select__wrapper {
  min-width: 300px;
  max-width: 300px;
}

@media (max-width: 500px) {
  .ebs-select__wrapper,
  .ebs-space__item {
    width: 100%;
  }
}
