@use 'variables' as *;

$font-family-title-api: 'Plus Jakarta Sans', sans-serif;
$font-family-sans-serif-api: 'Noto Sans', sans-serif;

body {
  margin: 0;
  padding: 0;
  font-family: $font-family-sans-serif-api;
  .menu-content {
    border-right: 1px solid $input-border-color;
  }
  .hajTkG,
  .bXxQac {
    border-width: 2px;
    border-radius: .25rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .5px;
  }
}

.redoc-wrap {
  &, &.dlpxFS {
    color: $body-color;
  }
}

.menu-content {
  img {
    width: 180px;
    margin: 8px 19px;
  }

  div[role="search"] {
    position: relative;

    .scrollbar-container {
      border-bottom: 1px solid var(--sl-color-gray-6);
    }

    .search-icon {
      top: 15px;
      left: 34px;
    }

    > i {
      right: 34px;
      top: 6px;
      font-size: 22px;
    }

    .search-input {
      display: block;
      height: calc(1.75rem + 1.25rem);
      padding: 8px 24px 8px 36px;
      font-family: "Noto Sans KR",sans-serif;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.75;
      color: #495057;
      background-color: #ffffff;
      background-clip: padding-box;
      border: 1px solid $input-border-color;
      border-radius: 32px;
      transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;

      &:focus {
        border-color: $primary;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($link-color, 0.6);
      }

      &::placeholder {
        color: $text-muted;
      }
    }
  }

  ul[role="menu"] {
    padding: 4px 16px 32px;
    li {
      label {
        font-family: $font-family-base;
        line-height: 22px;
        padding: 8px 8px 8px 16px;
        font-size: 14px;
        border-radius: 8px;
        background: transparent;
        &.active {
          position: relative;
          box-shadow: 0 2px 3px 0 rgba($crowdin-dark, .04);
          background: $white;

          &::before {
            content: '';
            display: block;
            width: 4px;
            border-radius: 3px;
            height: auto;
            left: 6px;
            background: $primary;
            position: absolute;
            top: 8px;
            bottom: 8px;
          }
        }

        &:hover:not(.active) {
          background-color: $crowdin-gray-005;
        }

        > svg {
          height: 22px;
        }
      }

      > ul {
        padding: 8px;
        background: rgba($crowdin-dark, .02);
        margin: 8px 0;
        border-radius: 8px;
      }
    }

    //hide branding
    + .sc-gfoqjT.dWGjvm {
      display: none;
      visibility: hidden;
    }
  }

  .operation-type {
    line-height: 18px;
    height: 18px;
    border-radius: 12px;
  }

  div[data-role="search:results"] {
    text-align: center;
    padding: 8px 16px;
    background: none;

    > li {
      text-align: left;

      label {
        font-family: $font-family-base;
        font-size: 14px;
        background: transparent;
        border-radius: 8px;

        &:hover {
          background-color: $crowdin-gray-005;
        }
      }
    }
  }
}

// TYPOGRAPHY start
h1, h2, h3, h4, h5, h6,
.dpNrcG,
.dSJzNl,
.espozG,
.dkRMkp{
  font-weight: 500 !important;
  font-family: $font-family-title-api !important;
}

h1 {font-size: $h1-font-size !important;}
h2 {font-size: $h2-font-size !important;}
h3 {font-size: $h3-font-size !important;}

.ibpoCO,
.dmMtMH {
  width: 14px!important;
  margin-top: 10px!important;
  left:30px!important;
  path {
    fill: $crowdin-gray-054;
  }
}

.hQYSSu,
.hNIqAi {
  right: 30px!important;
  font-size: 24px!important;
  color: $crowdin-gray-087!important;
}

.kYEhaZ pre {
  border-radius: 8px;
  background-color: $crowdin-gray!important;
}

.sc-pJurq {
  font-size: 1rem;
}

.sc-pJurq.hurBbj {
  color: $api-green-alert;
  background-color: rgba($api-green-alert, .1);
}

.sc-pJurq.eSEOsh {
  color: $api-red-alert;
  background-color: rgba($api-red-alert, .1);
}

.api-content {
  .redoc-markdown pre {
    border-radius: 8px;
  }

  h1 {
    letter-spacing: -.5px;
    > span {
      color: $text-muted;
      font-size: smaller;
    }
  }

  h2, h1 {
    color: $crowdin-primary-dark!important;
    margin: 3rem 0 .75rem;
  }

  h2 {
    font-size: calc(1.5rem + (8 * (100vw - 400px) / 624))!important;
    margin-bottom: $spacer;
    @media (min-width: 992px) {
      font-size: $h2-font-size!important;
    }
  }

  .http-verb {
    font-family: Verdana, sans-serif;
    font-weight: 600;
    border-radius: 16px;
  }

  h5 {
    font-family: $font-family-sans-serif!important;
    color: $crowdin-gray-054;
    letter-spacing: .5px;
    font-size: 13px;
    margin-top: 32px;
  }

  // buttons on right-panel codeblocks
  .dsVwAL > button {
    background: $white-012;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;

    & + button {
      margin-left: 8px;
    }
  }

  .haWzKC {
    div + div {
      margin-top: 8px;
    }
  }

  .hCqCRP {
    color: $text-muted;
  }
}

.sc-feJyhm.YzuTm,
.sc-fBdRDi.jBXMco {
  position: relative;

  &::before {
    content: 'API';
    display: inline-block;
    padding: 2px 6px;
    left: 200px;
    line-height: 25px;
    top: 13px;
    background: $white;
    color: $crowdin-dark;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: absolute;
    font-weight: 600;
    border: 1px solid $crowdin-dark;
    border-radius: 4px;
  }
}

/* TYPOGRAPHY end */

.well {
  background-color: #eceff1;
  border: 0 none;
  border-radius: .75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.api-section-block-highlighted {
  color: #5cb85c;
}

.http-method {
  display: inline-block;
  min-width: 60px;
  color: white;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 16px;
  background-repeat: no-repeat;
  padding: 2px 4px;
  font-size: 12px;
}

.method-list {
  margin-bottom: 8px;
}

.hclups li label span.operation-type,
.kyojiS li label span.operation-type {
  height: 15px;
  line-height: 16px;
}

.get {
  background-color: rgb(107, 189, 91);
}

.post {
  background-color: rgb(36, 143, 178);
}

.put {
  background-color: rgb(155, 112, 139);
}

.patch {
  background-color: rgb(224, 157, 67);
}

.delete {
  background-color: rgb(226, 122, 122);
}

//redoc logo hide
.sc-hXRMBi.nGwee,
.sc-fzqyOu.gjSLKH {
  visibility: hidden;
  display: none;
}

#back-to-doc {
  position: fixed;
  right: 20px;
  top: 20px;
  font-size: 14px;
  z-index: 1000;

  & > a {
    color: #333;
    text-decoration: none;
    padding: 7px 15px;
    border: 1px solid rgba(0,0,0,.2);
    background-color: rgba(255,255,255,.9);
    border-radius: 4px;
    background-clip: padding-box;

    &:hover {
      color: black;
      border: 1px solid rgba(0,0,0,.4);
      background-color: rgba(255,255,255,1);
    }
  }
}
