@import '../sass/colors';
@import '../sass/config';
@import '../sass/mixins';
@import '../components/buttons/buttons.stories';
@import '../components/icons/icons.stories';

.sg-story {
  display: flex;

  &-variant {
    margin-bottom: spacing(l);

    &__name {
      margin-bottom: spacing(s);
    }

    &-dark-box {
      background: $gray-50;
      padding: spacing(m);
    }

    &-border-box {
      border: 1px solid $gray-40;
      padding: spacing(m);
      border-radius: 5px;
    }
  }

  &-variant-table {
    td {
      padding: spacing(m);
      white-space: nowrap;
    }

    th {
      padding: spacing(m);
      white-space: nowrap;
    }

    &--align-items-top {
      td {
        vertical-align: top;
      }
    }
  }
}

.sbdocs.sbdocs-li {
  font-size: 18px;
}

.sbdocs-a:hover {
  text-decoration: underline;
}

.sbdocs.sbdocs-preview {
  box-shadow: none;
  border: 2px solid #ebf2f7;
  margin: 8px 0 24px;
}

.sbdocs.sbdocs-h2 {
  text-transform: uppercase;
  letter-spacing: -0.0625rem;
  font-size: 40px;
  line-height: 40px;
  font-weight: 900;
  position: relative;
  border: none;
  margin: 20px 0 8px;
}

.sbdocs.sbdocs-h2:first-of-type {
  margin-top: 20px;
}

.sbdocs.sbdocs-p {
  font-size: 18px;
  line-height: 28px;
  font-family: 'Figtree', 'Helvetica', 'Arial', sans-serif;
  font-feature-settings: 'ss01' 1; /* enables single-storey 'a' */
  font-weight: 400;
  color: #000000;

  code {
    font-size: 15px;
  }
}

.sbdocs.sbdocs-h3 {
  text-transform: uppercase;
  letter-spacing: -0.0625rem;
  font-size: 24px;
  font-weight: 900;
  position: relative;
}

.sbdocs.sbdocs-h4 {
  font-size: 18px;
  font-weight: 700;
}

.sbdocs.sbdocs-a {
  color: $blue-60;
}

.docs-story {
  padding-bottom: 16px;
  padding-right: 16px;
}

.docs-story .docblock-code-toggle {
  background-color: #000;
  color: #fff;
  border-radius: 13px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.sbdocs-preview > div:nth-of-type(2) > div:nth-of-type(2) {
  background: none;
}

.sbdocs-preview > div:nth-of-type(2):not(.docs-story) div:nth-of-type(2) button,
.sbdocs-preview
  > div:nth-of-type(3):not(.docs-story)
  div:nth-of-type(2)
  button {
  background: none;
  background-color: #fff;
  color: #000;
  border-radius: 13px;
  margin-right: 8px;
  margin-bottom: 8px;
  box-shadow: none;
}

.sbdocs-preview
  > div:nth-of-type(2):not(.docs-story)
  div:nth-of-type(2)
  button:focus,
.sbdocs-preview
  > div:nth-of-type(3):not(.docs-story)
  div:nth-of-type(2)
  button:focus {
  box-shadow: none;
}

.sbdocs-preview .docs-story > div:nth-of-type(2) button {
  background: none;
  background-color: #000;
  color: #fff;
  border-radius: 13px;
  margin-right: 8px;
  margin-bottom: 8px;
  box-shadow: none;
}

.sbdocs-preview .docs-story > div:nth-of-type(2) button:focus {
  box-shadow: none;
}

.docblock-source {
  border-radius: var(--border-radius-xs) !important;
}

.docblock-source button {
  background: #000;
  color: #fff;
  border-radius: 13px;
  margin-right: 8px;
  margin-bottom: 8px;
  margin-left: 0;
  margin-top: 0;
  box-shadow: none;
  border: none;
}

.docblock-source button:focus {
  box-shadow: none;
}

pre.prismjs {
  padding: 24px !important;
}

table.docblock-argstable tbody.docblock-argstable-body {
  box-shadow: none;
  border: 2px solid $gray-20;
}

.docblock-argstable-body tr {
  border-bottom: 2px solid #ebf2f7;
}

.docblock-argstable-body tr span {
  font-size: 14px;
  color: #000000;
}

.docblock-argstable-body tr span[title='Required'] {
  color: #cf1d00;
}

.docblock-argstable-head tr span {
  font-size: 14px;
}

.sbdocs.sbdocs-table {
  font-size: 14px;
}

.sbdocs.sbdocs-table tr td {
  border: 2px solid $gray-20;
}

.sbdocs.sbdocs-table tr:nth-of-type(2n) {
  background-color: $gray-10;
}

.sbdocs .docblock-source {
  box-shadow: none;
  margin: 8px 0 16px;
}

.docblock-source .prismjs {
  font-size: 14px;
}

.intro-page-header {
  border-radius: var(--border-radius-xs);
  width: 320px;
  height: 336px;
  background-image: url('./assets/introduction_phone.jpg');
  background-size: cover;
  padding-top: 64px;
  display: flex;
  align-items: center;
  flex-direction: column;

  @include sgResponsive(md) {
    width: 768px;
    height: 400px;
    padding-top: 74px;
    background-image: url('./assets/introduction_tablet.jpg');
  }

  @include sgResponsive(lg) {
    width: 1000px;
    height: 400px;
    padding-top: 32px;
    background-image: url('./assets/introduction_desktop.jpg');
  }

  &__text {
    width: 176px;

    @include sgResponsive(md) {
      width: 369px;
    }

    @include sgResponsive(lg) {
      width: 535px;
    }
  }

  &__logo {
    height: auto;
    width: 88px;

    @include sgResponsive(md) {
      width: 108px;
    }

    @include sgResponsive(lg) {
      width: 144px;
    }
  }
}

.sbdocs .sbdocs-info-box-icon {
  margin-top: 1px;
  margin-right: 8px;
}

.sidebar-item[data-selected='true'][data-nodetype='story'] > * {
  margin-left: 0;
}