/*!
 * Copyright (c) 2022 Evolveum and contributors
 *
 * This work is dual-licensed under the Apache License 2.0
 * and European Union Public License. See LICENSE file for details.
 */

.main-sidebar .sidebar > .user-panel {
  padding-left: 0.55rem;

  & > .image {
    //padding-left: 0.8rem;
    position: relative;
    width: 100%;
    min-width: 2.5rem;
    max-width: 2.5rem;
    padding:0;
    transition: all ease 0.08s !important;
    -webkit-transition: all ease 0.08s !important;

    & > .user-image {
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;
      height: 0;
      padding-bottom: 100%;
    }
  }
}

.user-panel {
  border-bottom: 0 !important;

  &.info-box {
    min-height:70px;
  }
  &.info-box > div > div:first-child {
    min-height:54px;
  }
}

.btn-default {

  &.active {
    background-color: darken($button-default-background-color, 5%);
    color: darken($button-default-color, 10%);
  }
}

.btn, .btn:hover {
  transition: all ease 0.08s !important;
  -webkit-transition: all ease 0.08s !important;
}

.card.card-outline-tabs .card-tools {
  margin: 0;
  margin-right: -0.625rem;
}

.dropdown-toggle:after {
  vertical-align: middle;
  /*margin: 0 0.255em;*/
  margin-bottom: 0.05rem;
}

.login-box-msg,
.register-box-msg {
  padding: 0 20px 10px;
  font-size:1.5rem;
}

.popover {
  z-index:1040;
}

/* Override for info button based on new bootstrap color*/
/*.btn-info {
  color: $button-default-color;

  &:hover, &:focus, &:focus-visible, &:active {
    color: $button-default-color;
    background-color: lighten($info, 10%);
    border-color: lighten($info, 10%);
  }
}*/

.navbar .navbar-nav .nav-item .breadcrumb a > i {
  color: $white;
}

.main-footer {
  color: #737373;
}

.layout-navbar-fixed.sidebar-mini.sidebar-collapse .wrapper .brand-link,
.layout-navbar-fixed.sidebar-mini-md.sidebar-collapse .wrapper .brand-link,
.layout-navbar-fixed.sidebar-mini-xs.sidebar-collapse .wrapper .brand-link {
  height: 3.5rem;
}

.nav-tabs {
  & .nav-link.active {
    color: $primary;
  }
  & .nav-link {
    color: $text-toned-color;
  }
  & .nav-link:hover {
    color: $primary;
  }
}

//Override for table-success/danger/etc. coloring to fulfill the color contrasts with dark mode available
@mixin table-background($color) {
  background-color: mix($white, $color, 88%);

  //Dark mode ready code when dark mode is implemented
  /*@media (prefers-color-scheme: dark) {
    background-color: mix($black, $color, 15%); // Dark mode adjustment
  }*/
}

@mixin table-row-style($color) {
  border-color: #dee2e6;
  @include table-background($color);
}
@each $key, $color in $theme-colors {
  .table-#{$key},
  .table-#{$key} > th,
  .table-#{$key} > td {
    @include table-row-style($color);
  }
  .table-hover .table-#{$key}:hover,
  .table-hover .table-#{$key}:hover > th,
  .table-hover .table-#{$key}:hover > td {
    background-color: mix($white, $color, 75%);
  }
}

//Bootstrap extension for form selects
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-item-parent {
  height: 100%;
  position: relative;

  & .form-control {
    padding-right:1.75rem;
  }

  & .form-item-dropdown {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #555555;
    font-size: 10.5px;
    transition: transform 0.1s ease;
  }
}

//TODO: Bootstrap override for toasts to fulfill contrast errors #Remove when bs5 implemented
@each $key, $color in $theme-colors {
  .toast.bg-#{$key} {
    background-color: mix($white, $color, 88%) !important;
    border:1px solid $color;

    & > .toast-header {
      background: $color;
    }
    & > .toast-body {
      color: $text-color;
    }
  }
}

li.nav-item > a.active > div > span.badge {
  background-color:$white;
  color:$primary;
}

.progress {
  height:.75rem;
}
