// Styling that modifies things that are already provided
// by UIKit. This file is intended to be imported from the
// main `style.scss`.


@import "variables";

$button_dark_background_colour: rgba(0, 0, 0, .95);
$button_dark_border_colour: rgba(34, 34, 34, .93);
$button_dark_hover_background_colour: rgba(0, 0, 0, .70);

$button_darkish_background_colour: rgba(0, 0, 0, .11);
$button_darkish_border_colour: rgba(34, 34, 34, .09);
$button_darkish_hover_background_colour: rgba(0, 0, 0, .22);

$dropbar_background_colour: #222222;
$nav_header_colour: #666666;

th p {
  margin: 0;
}

.uk-offcanvas-content {
  flex: 1 0 auto;
}

.uk-background-secondary .uk-navbar-dropdown-nav {
  .uk-active a {
    color: $white;
  }

  .uk-nav-header {
    color: $nav_header_colour;
    font-size: 120%;
    font-weight: bold;
    padding: 0;
    text-transform: none;

    &.uk-active {
      color: $white;
    }
  }

  .uk-navbar-dropbar {
    background: $dropbar_background_colour;
  }
}

.uk-navbar-container,
.uk-sticky-placeholder,
.uk-navbar-nav > li > a,
.uk-navbar-left > a {
  height: 70px;
}

.uk-navbar-dropdown {
  overflow-y: auto;
  top: 45px !important;
}

.uk-article-title {
  margin-bottom: 0 !important;
}

.uk-article-meta {
  margin-left: 2px;
  margin-top: 0 !important;
}

.uk-section {
  padding-bottom: 30px;
  padding-top: 20px;
}

.uk-heading-divider .uk-article-meta {
  margin-bottom: 0;
}

footer {
  // scss-lint:disable QualifyingElement
  flex-shrink: 0;

  div.uk-section {
    padding: 0;

    div.uk-text-center {
      margin-top: 20px;
    }
  }
}

.uk-button-dark {
  background: $button_dark_background_colour;
  border: 1px solid $button_dark_border_colour;
  color: $white;

  :hover {
    background: $button_dark_hover_background_colour;
  }
}

.uk-button-darkish {  // Technically our own style, but uses the uk prefix
  background: $button_darkish_background_colour;
  border: 1px solid $button_darkish_border_colour;

  :hover {
    background: $button_darkish_hover_background_colour;
  }
}

.uk-navbar-container {
  padding-left: 40px;
  padding-right: 40px;
}

// Custom success button

.uk-button-success {
  background-color: $success_colour;
  border: 1px solid transparent;
  color: $white;
}

.uk-button-success:hover,
.uk-button-success:focus {
  background-color: darken($success_colour, 5%);
}

.uk-button-success:active,
.uk-button-success.uk-active {
  background-color: darken($success_colour, 10%);
}

.uk-button-success:disabled {
  background-color: $white !important;
  border: 1px solid $global_border;
  color: $muted_colour !important;
}