// Override the the "black" theme settings
// https://github.com/frctl/mandelbrot/blob/master/assets/scss/skins/black.scss

@import "govuk_frontend_toolkit/colours/palette";

// Let's quickly make this look a bit more like GOV.UK
html {
  font-family: $toolkit-font-stack;
}

a:link,
a:visited {
  color: $link-colour;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: $link-active-colour;
}

/*
  Sidebar
------------------------------ */

// Sidebar background
.Frame-panel--sidebar {
  background: $white;
  width: 310px;
}

// Left hand navigation
.Tree,
.Tree-title,
.Tree-item {
  font-family: 'nta';
  letter-spacing: normal;
}

// Sidebar section title
.Tree-title {
  color: $text-colour;
  text-transform: none;
  @include bold-19;
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 0;
}

// Component name
.Tree-collectionLabel {
  @include core-16;
  color: $text-colour;

  //
  a {
    color: $text-colour;
    text-decoration: none;
  }
}

// Left hand navigation item
.Tree-entityLink {
  @include core-16;
  padding-top: 8px;
  padding-bottom: 8px;
}

.Tree-entityLink:hover {
  color: $link-hover-colour;
  background: $white;
}

.is-current .Tree-entityLink {
  color: $white;
  background: $govuk-blue;
}

[dir="ltr"] .Tree-title {
  padding-left: 30px;
}
[dir="ltr"] .Tree-title,
[dir="ltr"] .Tree-depth-1 .Tree-entityLink,
[dir="ltr"] .Tree-depth-1 .Tree-collectionLabel,
[dir="ltr"] .Tree-depth-2 .Tree-collectionLabel {
  padding-left: 30px;
}

[dir="ltr"] .Tree-depth-2 .Tree-collectionLabel span {
  margin-left: 0;
}

[dir="ltr"] .Tree-depth-2 .Tree-entityLink {
  padding-left: 45px;
}

[dir="ltr"] .Tree-collectionLabel span {
  padding-left: 0;
  color: $link-colour;
}

.Tree-collectionLabel span::before {
  display: none;
}

/*
  Components title & preview
------------------------------ */

.Pen {
  margin: 15px 20px;
}

// Component title and status wrapper
.Pen-header {
  max-height: 4rem;
  padding-top: 1em;
  padding-bottom: 1em;
}

// Component title
.Pen-title {
  color: $black;
  @include bold-36;
  letter-spacing: normal;
  padding: 1em 0;
}

// Component preview link
.Pen-previewLink svg {
  fill: $govuk-blue;
  margin-bottom: 10px;
}
.Pen-previewLink:after{
  content: "Preview";
  @include bold-16;
  color: $link-colour;
}

.Pen-previewLink:link,
.Pen-previewLink:visited,
.Pen-previewLink:hover,
.Pen-previewLink:active {
  color: $black;
  text-decoration: none;
}

// Component preview box
.Preview {
  border-color: $border-colour;
}


/*
  Components (Notes, HTML, View, tabs)
------------------------------ */

// Component info box
.Browser-tab a:link,
.Browser-tab a:visited,
.Browser-tab a:hover,
.Browser-tab a:active {
  color: $black;
  border-bottom-width: 5px;
  @include core-16;
}

.Browser-tab a:hover {
  background: $highlight-colour;
  border-bottom-color: $link-hover-colour;
}

.Browser-tab.is-active a {
  background: $highlight-colour;
  border-bottom-width: 5px;
  border-bottom-color: $govuk-blue;
}

.Browser-tab svg {
  width: 25px;
  height: 25px;
}

.Browser-panel {
  background: #fff;
  padding: 0;
}
.Browser-panel .Code {
  width: 100%;
}
.Browser-panel .Code pre {
  padding: 1rem 1.5rem;
}

/*
  Documentation
------------------------------ */

.Document-header {
  border-bottom: none;
}

.Document-title {
  color: $black;
  @include bold-36;
}

/*
  Documentation text styles
------------------------------ */

.Prose {
  @include core-19;

  color: $black;

  h1,
  h2,
  h3,
  h4 {
    color: $black;
    letter-spacing: normal;
  }

  h1 {
    @include bold-36;
  }
  h2 {
    @include bold-24;
  }
  h3 {
    @include bold-19;
  }

  p code {
    padding: .3rem .5rem;
  }

  code pre {
    padding: 1rem 1.5rem;
    margin: 1rem 0 1.5rem 0;
  }

  blockquote {
    padding: .25em 0 .25em .75em !important;
    border-left-width: 10px !important;

    p {
      margin-bottom: .75rem;
    }
  }
}

.alpha-warning {
  padding: 10px 30px;
  background-color: #f6f6f6;
  border-bottom: 1px solid rgba(83, 83, 99, 0.25);

  .phase-banner {
    margin-right: 5px;
  }
}

/*
  Status
------------------------------ */

// Hide status dots in navigation
.Status-dot {
  display: none;
}


/*
  Panel scrolling - disabled
------------------------------ */

.Frame {
  position: relative;
  height: inherit;
  overflow: auto;
}

.Frame-inner {
  position: relative;
  height: auto;
  overflow: auto;
}

.Pen-panel .Browser{
  position: relative;
}

.Frame-header {
  position: sticky;
  top: 0px;
}
