:root {
  --logo-nav-padding: 0px;
}

/* Header Styles */
.md-header {
  padding-left: 24px;
  border-radius: 0px 0px 12px 12px;
}

/*Hide the active title next to the Kedro logo*/
.md-header__title--active {
  visibility: hidden;;
}

.md-header__inner {
  padding-bottom: var(--logo-nav-padding);
  display: flex;
  align-items: center;
}

.md-header__title {
  flex: 1;
}

.md-header--shadow {
  box-shadow: none;
}

.md-header,
.md-tabs {
  background-color: var(--yellow-6);
  color: var(--black-900) !important;
}

/* Search Box Styles */
.md-search__form {
  border-radius: 4px;
  border: 1px solid var(--yellow-600);
  display: flex;
  padding: 8px;
  align-items: center;
  background-color: transparent;
  height: auto;
}

.md-search__inner {
  width: 200px;
}

.md-search__input {
  color: var(--yellow-600);
  font-size: 16px;
  padding-left: 35px !important
}

.md-search__input::placeholder {
  color: var(--yellow-600);
}

.md-search__icon svg {
  fill: var(--yellow-600);
}

.md-search__overlay {
  display: none;
}

.md-typeset blockquote {
  border-left: 0.2rem solid var(--yellow-300) !important;
}

.md-sidebar__scrollwrap:hover {
  scrollbar-color: var(--yellow-6) #0000;
}

/* Tabs + Navigation dropdown Styles */
.md-tabs__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: none;
  min-width: 200px;
  background-color: var(--yellow-600);
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.md-tabs__item:hover .md-tabs__dropdown {
  display: block;
}

.md-tabs__dropdown-list {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.md-tabs__dropdown-item {
  padding: 0;
}

.md-tabs__dropdown-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--black-900);
  text-decoration: none;
}

.md-tabs__dropdown-link:hover,
.md-tabs__dropdown-link--active {
  background-color: var(--yellow-700);
}

.md-tabs__link {
  font-size: 16px;
}

.md-tabs__item--active {
  font-weight: 600;
  height: 100%;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--black-900);
}

/** Primary Sidebar Style */
.md-sidebar--primary {
    width: 348px;
    padding: 0;
    padding: 24px 10px;

    /* Colour for the section labels */
    .md-nav__item--section > .md-nav__link[for] {
        color: var(--text-primary-color);
        align-items: center;
    }

    .md-sidebar__inner {
      background-color: var(--primary-sidebar-bg-color);
      padding: 24px 0;
      border-radius: 12px;
    }

    .md-nav__item--section {
        margin-top: 0;
    }

    .md-nav__list {
      padding-left: 8px !important;
    }

    .md-nav__link {
        font-size: 16px;
        margin: 0px 8px 0px 24px;
        color: var(--text-primary-color);
        display: flex;
        align-items: center;
    }

    .md-nav__link span {
        padding: 4px 0 4px 0;
        line-height: 32px;
    }

    .md-nav__link--active,
    .md-nav__link[href]:hover,
    .md-nav__link[href]:focus,
    .md-nav__link[for]:hover,
    .md-nav__link[for]:focus
    {
        border-radius: 12px;
        background-color: var(--active-link-bg-color);
        color: inherit !important;
        padding: 0px 8px 0 24px;
        margin: 0;
        display: flex;
        width: 100%;
    }

    .md-icon {
      display: flex;
      width: 24px;
      height: 24px;
    }
}

/* Secondary sidebar styles */
.md-sidebar--secondary {
  margin-right: 64px;

  .md-nav__title {
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary-color);
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 10px;
  }

  .md-nav__item {
    font-size: 16px;
    padding-bottom: 10px;
  }

  .md-nav {
    padding-top: 10px;
  }

  .md-nav__link {
    color: var(--text-secondary-color);
  }

  .md-nav__link:hover {
    color: var(--text-hover-color);
  }

  .md-nav__link--active {
    color: var(--text-primary-color);
  }
}

/* Main Content Styles */
.md-grid {
  max-width: none;
}

.md-content {
  padding: 48px 64px 48px 64px;
}

.md-main__inner {
  margin: 0;
}

/* Code Block Styles */

.md-typeset pre {
  background-color: var(--admonition-bg-color);
}

.md-typeset pre code {
  background-color: var(--admonition-bg-color);
  color: var(--text-primary-color);
  margin: 20px; /* this is to ensure there's no overlap with the copy icon */
}

/** copy icon button in code blocks */
.md-clipboard {
  color: var(--text-secondary-color);
}

/** highlight the copy icon button on hover */
.md-clipboard:hover,
pre:hover .md-clipboard {
  color: var(--text-hover-color);
}

/** Style for expandle code blocks */
.md-typeset details.example {
  background-color: var(--admonition-bg-color);
  border: none;
  border-radius: 6px;
  font-size: 16px;

  .md-typeset code {
    padding: 0;
  }
}

/* Admonition Styles */
.md-typeset .admonition {
  background-color: var(--admonition-bg-color);
  border: 1px solid var(--admonition-border-color) !important;
  border-radius: 6px;
  color: var(--text-primary-color);
  display: flow-root;
  font-size: 16px;
  margin: 24px 0;
  padding: 16px 20px;
  page-break-inside: avoid;
}

.md-typeset .admonition .admonition-title {
  background-color: transparent;
  padding-bottom: 0;
}

.md-typeset .admonition .admonition-title:before {
  background-color: var(--icon-fill-color);
}

.md-typeset details.example summary {
  background-color: var(--admonition-bg-color);
  color: var(--text-primary-color);
}

.md-typeset details.example summary:before,
.md-typeset details.example summary:after {
  background-color: var(--icon-fill-color);
}

.md-typeset details.example:focus-within {
  box-shadow: none;
}

/* Codeblock Highlight Styles */
.highlight .n /* Names */,
.highlight .p /* Punctuation */,
.highlight .o /* Operators */,
.highlight .ow /* Operator words */,
.highlight .na /* Attribute names */,
.highlight .nv /* Variable names */,
.highlight .vc /* Class names */,
.highlight .vg /* Global variables */,
.highlight .vi {
  /* Instance variables */
  color: var(--text-primary-color);
}

.highlight .ge,
.highlight .gh,
.highlight .go,
.highlight .gp,
.highlight .gr,
.highlight .gs,
.highlight .gt,
.highlight .gu {
  color: var(--text-primary-color);
}

/* Comment elements in code blocks */
.highlight .c /* General comments */,
.highlight .c1 /* Single-line comments */,
.highlight .ch /* Hashbang comments */,
.highlight .cm /* Multiline comments */,
.highlight .cs /* Special comments */,
.highlight .sd /* Docstrings */
{
  color: var(--text-secondary-color);
}

.md-typeset__table {
  td {
    min-width: 200px;
  }
}

/* Desktop-specific styles for positioning the search box and header options */
@media screen and (min-width: 76.2344em) {
  .md-search,
  .md-header__option,
  .md-header__source {
    transform: translateY(calc(100% + var(--logo-nav-padding)));
    z-index: 2;
  }

  /* Position the elements at tabs level with specific order */
  .md-search {
    order: 1;
  }

  .md-header__option {
    order: 2;
    margin-left: 16px;

    .md-icon {
      padding-left: 0;
      padding-right: 0;
    }
  }

  .md-header__source {
    order: 3;
    width: 205px;
    margin-left: 0 !important;
  }

  /** Hide the nav label specifically on desktop version only */
  #__nav_2_label {
    display: none;
  }


}

/** MOBILE STYLES */
@media screen and (max-width: 76.2344em) {
  .md-nav--primary .md-nav__item {
      border-top: none;
  }

  .md-nav--primary .md-nav__title  {
      background-color: var(--yellow-6);
        color: var(--black-900);
      padding-left: 24px;
      font-size: 20px;
  }

  .md-nav__icon:after {
      color: var(--black-900);
  }

  .md-nav--primary .md-nav__title[for="__drawer"],
  .md-nav__source {
      background-color: var(--yellow-6);
      color: var(--black-900);
  }

  iframe {
      height: 260px;
  }

  .md-sidebar--primary,
  .md-nav--primary {
    max-width: 242px;
    margin: 0;
  }

  .md-content {
    padding: 0;
  }

  .md-nav__link {
    margin: 0 !important;
    font-size: 14px !important;
  }

    .md-content__inner>.highlight {
        width: 100%;
        margin: 0;
    }

    .md-content__inner {
        padding: 24px;
        margin: 0;
    }
}