// based on Quartz 5.3.8
// Bootswatch
// with RG modifications


// Variables

$body-bg-image: linear-gradient(90deg, rgba($white, 0), rgba($white, .7),rgba($white, .7), rgba($white, .0)) , url('/plik/res/svg/rsch_ptt_wt.svg')!default;
//$body-bg-image: url('/plik/res/svg/rsch_ptt_wt.svg') !default;

$frosted-opacity: .1 !default;

// Mixins

@mixin glass($opacity: $frosted-opacity, $bg: $rs-blue-light) {
  border: none;
  box-shadow: inset 1px 1px $border-color, inset -1px -1px rgba($white, .1), $box-shadow;
  @include frost($opacity, $bg);

  a:not(.btn) {
    color: $card-color;
  }

  .text-muted {
    color: rgba($card-color, .7) !important;
  }
}

@mixin frost($opacity: $frosted-opacity, $bg: $white) {
  background-color: transparent;
  background-image: linear-gradient(125deg, rgba($bg, ($opacity)), rgba($bg, ($opacity - .1)) 70%);
  backdrop-filter: blur(3px);
}

// Body

body {
  background-image: $body-bg-image;
  background-repeat: no-repeat, repeat;
  background-size: cover, 200px auto;
}

@include color-mode(dark) {
  body {
    color: $white;
  }
}

// Tables

.table-secondary {
  --bs-table-hover-color: $white;
}

// Buttons

.btn {
  &-secondary {
    color: $white;
    border: none;

    &:hover,
    &:focus {
      color: $white;
    }

    &.disabled {
      color: $white;
    }
  }

}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include glass();
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  }
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include glass(.9, $value);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  }
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
  margin-left: 0;
}

.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: 0;
}

.bg-light .btn {
  background-color: rgba($black, .2);
}

// Cards
.card {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

// Forms

.input-group-text,
.form-control::file-selector-button {
  background-color: transparent;
  background-image: linear-gradient(125deg, rgba($white, .3), rgba($white, .2) 70%);
  backdrop-filter: blur(5px);
  border: none;
}

.form-control:not(.form-control-plaintext) {
  @include glass();
  border: $input-border-width solid $input-border-color;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: rgba($white, .1);
}

.input-group-text {
  box-shadow: inset 1px 1px $border-color, inset -1px -1px rgba($white, .1);
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: 0;
  border-left: none;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3) {
  border-right: none;
}

.form-select:not([multiple]) {
  transition: border-color .15s ease-in-out;

  option {
    color: $black;
  }
}

.bg-light .form-control {
  color: $gray-800;
  border-color: rgba($black, .2);

  &::placeholder {
    color: rgba($black, .2);
  }
}

// Navs

.dropdown-menu {
  @include glass(.8, $rs-blue-ultralight);
}

.nav-tabs {
  .nav-link {
    transition: none;

    &:hover,
    &:focus {
      color: $rs-blue-dark;
      isolation: auto;
    }

    &,
    &.disabled {
      background-color: rgba($rs-blue-ultralight, .5);
    }
  }

  // .nav-item:first-child > .nav-link {
  //   border-radius: $border-radius 0 0 $border-radius;
  // }

  // .nav-item:last-child > .nav-link {
  //   border-radius: 0 $border-radius $border-radius 0;
  // }

  .nav-item .nav-link.active,
  .nav-item.show .nav-link {
    @include glass(.4, $rs-blue-light);
    border-radius: $border-radius;
    transform: scale(1.1);

    &:hover,
    &:focus {
      color: $rs-blue-dark;
    }
  }

  .dropdown-menu {
    border-radius: $border-radius;
  }
}

.nav-pills {
  .nav-link {
    transition: none;

    &:hover,
    &:focus {
      color: $white;
      isolation: auto;
    }
  }
}

// Indicators

.alert {
  @include glass();
  position: relative;
  overflow: hidden;
  color: $body-color;

  @each $color, $value in $theme-colors {
    $opacity: .7;
    &-#{$color}::after {
      position: absolute;
      top: 0;
      left: 0;
      width: .5rem;
      height: 100%;
      content: "";
      background-color: $value;
    }
  }

  .alert-link {
    color: $card-color;
  }
}

.badge {
  &.bg-secondary {
    --bs-bg-opacity: .4;
  }

  &.bg-light {
    color: $gray-800;
  }
}

// Containers

.list-group {
  @include glass();
}

.card {
  @include glass();

  @each $color, $value in $theme-colors {
    @if ($color == secondary) {
      --bs-secondary-rgb: transparent;
    } @else {
      &.bg-#{$color} {
        background-image: none;
      }
    }
  }

  a:not(.btn) {
    color: $link-color;
    &:hover, &:focus, &:active {
      color: $rs-blue-dark;
    }
  } 

  &.bg-light {
    .card-header,
    .card-body {
      @include glass();
    }
  }

  &.border {
    @each $color, $value in $theme-colors {
      &-#{$color} {
        @include glass();

        .card-header {
          background-color: $value !important;
          border-bottom: none;

          @if ($color == light) {
            color: $gray-800;
          }
        }
      }
    }
  }

  &-header {
    font-weight: $headings-font-weight;
  }
}

.accordion-item {
  @include glass();
  box-shadow: none;
}

.toast {
  @include glass();
}

.popover {
  @include glass(.8);

  &-header {
    border-bottom-color: $border-color;
  }
}

.tooltip {
  backdrop-filter: blur(1px);
}

.modal-content {
  @include glass(.92, $white);
}

.offcanvas {
  @include glass();
}

html[data-bs-theme="dark"] {
  .dropdown-menu {
    @include glass(.58, $black);
    background-color: #0d1522;
    color: $white;
  }

  .dropdown-item {
    color: $white;

    &:hover,
    &:focus,
    &.active,
    &:active {
      color: $white;
      background-color: rgba($white, 0.12);
    }
  }

  .nav-tabs {
    .nav-item .nav-link.active,
    .nav-item.show .nav-link {
      color: $white;

      &:hover,
      &:focus {
        color: $white;
      }
    }
  }

  .modal-content {
    @include glass(.5, $black);
    background-color: rgba($black, 0.8);
    color: $white;
  }

  .modal-content a:not(.btn),
  .modal-content .btn-link {
    color: $white !important;
  }

  .modal-content a:not(.btn):hover,
  .modal-content a:not(.btn):focus,
  .modal-content .btn-link:hover,
  .modal-content .btn-link:focus {
    color: rgba($white, 0.85) !important;
  }

  .modal-header,
  .modal-footer {
    border-color: rgba($white, 0.14);
  }

  .modal-backdrop.show {
    opacity: 0.85;
  }
}