//
// Overrides
//
// Styles that override and compliment default Bootstrap styles. Anything that can't be configured
// using variables.scss should be added here.
//

////////////////////////////////////////////////////////////////////////////////////////////////////
// Transitions
////////////////////////////////////////////////////////////////////////////////////////////////////

// Make sure transitions don't fire before the page is loaded
.preload * {
  transition: none !important;
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// Fonts
////////////////////////////////////////////////////////////////////////////////////////////////////

body {
  font-weight: $font-weight-normal;
}

// Text selection
::selection { color: white; background-color: $link-color; }

////////////////////////////////////////////////////////////////////////////////////////////////////
// Anchors
////////////////////////////////////////////////////////////////////////////////////////////////////

a:focus {
  outline: none;
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// Forms
////////////////////////////////////////////////////////////////////////////////////////////////////

// Labels
label {
  color: #53798a;
  margin-bottom: .4rem;
}

// No margin for label buttons, which are used for file inputs
label.btn {
  margin-bottom: 0;
}

label,
.form-control {
  transition: border-color .1s, color .1s;
}

.has-danger {
  label {
    color: $brand-danger;
  }

  .custom-select {
    border-color: $brand-danger;
  }
}

.has-success {
  label {
    color: $brand-success;
  }

  .custom-select {
    border-color: $brand-success;
  }
}

.has-warning {
  label {
    color: $brand-warning;
  }

  .custom-select {
    border-color: $brand-warning;
  }
}

.form-text {
  font-size: .85rem;
  color: $text-muted;
}

// Same text as the app
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

// Remove shadows from iOS inputs
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="text"],
input[type="time"],
input[type="url"],
textarea {
  -webkit-appearance: none;
}

// Code inputs
input.code,
textarea.code {
  font-family: $font-family-monospace;
  font-weight: 300;
}

// Keyboard meta keys
kbd.meta::before {
  content: 'ctrl';
}

.mac kbd.meta::before {
  content: '⌘';
}

// Use custom form styles for select elements
select.form-control:not([size]):not([multiple]) {
  @extend .custom-select;
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// Buttons
////////////////////////////////////////////////////////////////////////////////////////////////////

.btn {
  transition: background-color .1s, border-color .1s, color .1s;
  font-weight: inherit;
  cursor: pointer;
  // Remove focus outline
  &:focus,
  &.focus,
  &:active:focus,
  &:active.focus,
  &.active:focus,
  &.active.focus {
    outline: none;
  }
  // Make button icons a bit larger
  i {
    transform: scale(1.2);
  }
}

.btn-secondary:focus {
  color: $btn-secondary-color;
}

.input-group-addon:focus {
  outline: none;
}

// Button variations
.btn-create { @extend .btn-success; }
.btn-delete { @extend .btn-danger; }
.btn-black { @include button-variant(white, $postleaf-black, $postleaf-black); }

// File buttons
.btn-file {
  margin-bottom: 0;
}

// Icon buttons
.btn-icon {
  color: lighten($postleaf-black, 40%);
  border: none;
  border-radius: 0;
  background: transparent;
  .fa {
    transform: scale(1.3);
  }
  .fa-caret-down {
    transform: scale(1);
    margin-left: .25rem;
  }
  &:focus,
  &:hover {
    color: lighten($postleaf-black, 30%);
  }
  &.enabled {
    box-shadow: none;
    color: $link-color;
  }
  &:active {
    box-shadow: none;
    &:focus {
      box-shadow: $btn-focus-box-shadow;
    }
  }
  &:disabled,
  &.disabled {
    opacity: .5;
  }
}

@include media-breakpoint-down(sm) {
  .btn-icon .fa {
    transform: scale(1.2);
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// Badges
////////////////////////////////////////////////////////////////////////////////////////////////////

.badge {
  text-transform: uppercase;
}

// Page flags
.badge-page { @include badge-variant($brand-info); }
.badge-featured { @include badge-variant($brand-info); }
.badge-sticky { @include badge-variant($brand-info); }

// Page status
.badge-draft { @include badge-variant($postleaf-yellow); }
.badge-pending { @include badge-variant($brand-warning); }
.badge-rejected { @include badge-variant($brand-danger); }
.badge-published { @include badge-variant($brand-success); }

.badge .fa {
  margin-right: .1rem;
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// Cards
////////////////////////////////////////////////////////////////////////////////////////////////////

.card {
  box-shadow: 0 1px 1px rgba($postleaf-black, .05);

  // Card selections
  &.selected {
    border-color: white;
    box-shadow: 0 0 0 .5rem $link-color;
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// Dropdowns
////////////////////////////////////////////////////////////////////////////////////////////////////

.dropdown-menu {
  user-select: none;

  // Variation with no minimum width
  &.dropdown-menu-no-min {
    min-width: 0;
  }
}

.dropdown-item.enabled {
  position: relative;

  &::before {
    position: absolute;
    top: .4rem;
    left: .5rem;
    content: '✔';
    font-size: .8rem;
  }
}

.dropdown-btn-group {
  white-space: nowrap;
  padding: 0 .5rem;
  margin-bottom: .25rem;

  &:last-child {
    margin-bottom: 0;
  }

  .btn {
    transition: none;
    border-radius: $btn-border-radius;

    &:hover {
      background-color: $dropdown-link-hover-bg;
      color: white;
    }

    &:not(:last-child) {
      margin-right: .25rem
    }

    .fa {
      width: 1em;
    }
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// Nav / tabs
////////////////////////////////////////////////////////////////////////////////////////////////////

.nav {
  .nav-link {
    color: $text-muted;

    &:disabled,
    &.disabled {
      opacity: .5;
    }
  }
}

.nav-tabs .active {
  position: relative;

  // Place a colored top border on the active tab. We can't just change border-top-width because it
  // affects the way the other tabs are displayed on hover.
  &::after {
    position: absolute;
    top: -$nav-tabs-border-width;
    left: -$nav-tabs-border-width;
    right: -$nav-tabs-border-width;
    content: '';
    border-top: solid .2rem $postleaf-green;
    border-top-left-radius: $nav-tabs-border-radius;
    border-top-right-radius: $nav-tabs-border-radius;
    pointer-events: none;
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// Templates
////////////////////////////////////////////////////////////////////////////////////////////////////

// We can't use <template> yet, so we'll use <div data-template> instead.
[data-template] {
  display: none;
}