// Colors
// ---------
$color-white:                #ffffff;
$color-black:                #000000;

// new colors
$color-ltgray:                  #c8c8c8;
$color-gray:                    #aaa99f;
$color-medgray:                 #76777b;
$color-black-text:              #333333;
$color-ribbon:                  #eaeaea;
$color-ribbon_text:             #CCCCCC;
$color-tab:                     lighten($color-ribbon, 52%);

$new-colors: (
  "ltgray": $color-ltgray,
  "gray": $color-gray,
  "medgray": $color-medgray,
  "black-text": $color-black-text,
  "ribbon": $color-ribbon,
  "ribbon_text": $color-ribbon_text,
) !default;

@each $color, $value in $new-colors {
    .bg-#{"" + $color} {
        background: $value;
    }

    .text-#{"" + $color} {
        color: $value !important;
    }

    .bg-#{"" + $color}-lt {
        color: $value !important;
        background: rgba($value, .1) !important;
    }

    .border-#{"" + $color} {
        border-color: $value !important;
    }
}

$blue: #206bc4 !default;
$azure: #4299e1 !default;
$indigo: #4263eb !default;
$pink: #d6336c !default;
$red: #d63939 !default;
$orange: #f76707 !default;
$yellow: #f59f00 !default;
$lime: #74b816 !default;
$green: #2fb344 !default;
$teal: #0ca678 !default;
$cyan: #17a2b8 !default;

$extra-colors: (
  "blue": $blue,
  "azure": $azure,
  "indigo": $indigo,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "lime": $lime,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
) !default;

@each $color, $value in $extra-colors {
    .bg-#{"" + $color} {
        background: $value;
    }

    .text-#{"" + $color} {
        color: $value !important;
    }

    .bg-#{"" + $color}-lt {
        color: $value !important;
        background: rgba($value, .1) !important;
    }

    .border-#{"" + $color} {
        border-color: $value !important;
    }
}


// Ribbon
$ribbon_height:           38px;
$footer_height:           75px;
$banner_z:                500;
$float_z:                 500;


// Tabler overrides
// -------------------------

:root {
  // increase the base font-size so old folk like me can read it
  font-size: 18px !important;

  // give text in disabled form fields some left padding
  .form-control-plaintext {
    padding: 0.4375rem 0.75rem;
  }

  // fix some vertical alignment problems caused by tabler
  .widget-list__sidebar,
  .widget-list__main {
    .h2 { margin-bottom: 0;}
  }

  .widget-index__item {
    font-size: 1rem;
  }

  // make the text color on .bg-light be actually readable
  .bg-light {
    color: var(--tblr-body-color) !important;
  }
}

// Make the logo be left-aligned
@media only screen and (min-width: 1200px) {
    .navbar-vertical .navbar-brand {
        justify-content: start !important;
        margin-bottom: 1rem;
    }
}

// give a bit of top margin on the first flash message
.messages__item:first-child { margin-top: 1rem;}

// If this is a horizontal submenu, highlight the active item
.submenu .nav-link.active {
  background-color: rgba(#f59f00, .3);
  border-radius: 20px;
}

pre {
    background-color: #f8f8f8;
    color: black;
    border: 1px solid $color-ribbon_text;
}

// Deal with our alternate body layouts
.body {
  &--left {
    display: flex !important;
    flex-direction: row !important;
    .page {
      padding-left: 0;
      .page__content {
        margin-left: 18rem;
      }
    }
    .ribbon_bar__content__breadcrumbs { margin-left: 9rem; }
  }
}
