@keyframes pulse {
  0% {
    box-shadow: 0 0 0 rgba(40, 167, 69, 0.5);
  }
  70% {
    box-shadow: 0 0 15px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 rgba(40, 167, 69, 0);
  }
}

.required-code {
  background-color: #f9f2f4;
  padding: 2px 4px;
  color: #c7254e;
}

table {
  font-size: 0.875rem;
}

thead th {
  font-weight: 600;
}

/* Chevron styles */
.chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transform: rotate(45deg); /* Initial chevron-down position */
  transition: transform 0.3s ease; /* Smooth rotation transition */
  margin-left: 8px;
}

.chevron-up {
  transform: rotate(-135deg); /* Chevron-up position */
}

pre {
  margin: 0;
}

.code-wrapper {
  --code-bg: hsl(220, 13%, 18%);
  background-color: var(--code-bg);
  border-radius: 0.25rem;
  position: relative;

  & .code-actions-wrapper {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 2;
  }

  & .code-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-inline-end: 0.5rem;
    gap: 4px;
  }

  & .hljs {
    background-color: var(--code-bg);
  }
}

.copy-btn {
  background-color: var(--code-bg);
  color: #fff;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s ease;

  &:hover {
    background-color: var(--bs-gray-800);
    color: #fff;
  }

  &:active {
    transform: scale(0.95);
  }

  &.copied {
    background-color: var(--bs-form-valid-color);
    animation: pulse 1s ease-out;
  }
}

.reqblock-copybtn{
  margin-right: 15px;
}

.language-selector {
  background-color: var(--code-bg);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;

  &:hover {
    color: #fff;
    background-color: var(--bs-gray-800);
  }
}

/* Used ID to override bootstrap styles */
#languageDropdown  + .languages-list {
  margin: 0;
  top: 0;
  padding: 6px 0 6px 8px ;
  overflow: scroll;

  &.show {
    display: grid;
    row-gap: 2px;
    min-width: fit-content;
    width: 104px;
    top: -100% !important;
  }

  & li {
    padding: 0;
  }

  & .dropdown-item {
    padding: 0;
    font-size: 0.875rem;

    &:hover {
      background-color: rgb(226, 232, 240);
    }
  }
}

pre {
  margin: 0;
}

.docs-code-block {
  max-height: 24rem;
  overflow: auto;
  padding: 0.5rem 0;
  border-radius: 0.5rem;
  position: relative;

  & pre {
    height: 100%;
  }

  & pre code {
    width: fit-content;
  }
}

.request-table-wrapper {
  /* max-height: 32rem; */
  max-height: 43rem;
  overflow: auto;

  & table thead tr th {
    position: sticky;
    top: 0;
    left: 0;
    background-color: hsl(201, 91%, 98%);
  }
}

.docs-sidebar{
  width: 296px;
}
.docs-content{
  margin-left: 296px; 
}

.sidenav_method_badge{
  width: 9ch;
}


@media (max-width: 980px) {
  .docs-content {
      margin-left: 0;
      padding: 1rem; 
  }

  .docs-heading {
      margin-left: 0.625rem; 
  }

  .docs-intro {
      padding: 0.625rem; 
      
    }
}

@media (min-width: 990px) {
  #docs-sidebar {
      transform: translateX(0) ; 
      visibility: visible ;
      opacity: 1 ;
  }
}

@media (max-width: 759px) {
  #docs-sidebar {
      transform: translateX(-100%); 
      transition: transform 0.3s ease-in-out;
  }

  .docs-sidebar-visible {
      transform: translateX(0) !important;
  }
}

@media screen and (min-width: 765px) and (max-width: 1200px) {
  .code-wrapper {
      overflow-x: auto; 
  }
}

@media screen and (max-width: 979px){
  .docs-section{
    margin-top:-23px;
  }

}

@media (max-width: 576px) {
  .action-btn {
    /* width: 91px; */
    padding: 7px 11px;
  }
}