// Required
// We import bootstrap.min.css to get the vendor prefixes. Including them not, would require us to use autoprefixer, which is a node package (but it is integrated in django-sass-processor)
@import "../css/bootstrap.min.css";
//@import "bootstrap/bootstrap";

// Colors we define
$dark-blue: #2A6496; // Dissemin dark blue
$dark-green: #71AF33; // Dissemin green
$light-blue: #5F8BB0; // Dissemin light blue
$orcid-green: #A6CE39; // ORCID-Green

// We change the primary color
$primary: $dark-blue;
$secondary: $light-blue;

@import "bootstrap/functions";
@import "bootstrap/variables";

// We add a green as tertiary color
$theme-colors: (
  "tertiary": $dark-green,
  "gray-5": $gray-500,
  "gray-6": $gray-600,
);


// We compile entire bootstrap
@import "bootstrap/bootstrap";

/* Custom mixins */

/* Borders */

/* We want additional border sizes */

$border-width-custom-1: 1px !default;
$border-width-custom-2: 2px !default;
$border-width-custom-3: 3px !default;
$border-width-custom-4: 4px !default;
$border-width-custom-5: 5px !default;
$border-width-custom-6: 6px !default;
$border-width-custom-7: 7px !default;
$border-width-custom-8: 8px !default;

$border-width-customs: ("1": $border-width-custom-1, "2": $border-width-custom-2, "3": $border-width-custom-3, "4": $border-width-custom-4, "5": $border-width-custom-5, "6": $border-width-custom-6, "7": $border-width-custom-7, "8": $border-width-custom-8);

@each $name, $size in $border-width-customs {
    @each $var in '', 'top-', 'right-', 'bottom-', 'left-' {
        .border-#{$var}#{$name} { border-#{$var}width: $size !important; border-#{$var}style: solid; border-#{$var}color: $border-color;}
    }
}

/* We want dotted borders */

@each $var in '', 'top-', 'right-', 'bottom-', 'left-' {
    .border-#{$var}dotted { border-#{$var}width: 2px; border-#{$var}style: dotted; border-#{$var}color: $border-color;};
}

/* Buttons */

.btn-search {
  @include button-variant($dark-green, $dark-green);
}

// The color should be white, as this is used with orcid, however, the color is bright, so bootstrap decides for dark text
.btn-orcid {
  @include button-variant($orcid-green, $orcid-green);
  color: $light;
}

.btn-orcid:hover, .btn-orcid:focus {
  color: $light;
}

/* To make our bottom-border life under headings easier, we define suitable classes */

h1.h-border, h2.h-border {
    @extend .border-bottom-3;
    @extend .border-primary;
    @extend .pb-1;
}
h3.h-border, h4.h-border {
    @extend .border-bottom-2;
    @extend .border-primary;
    @extend .pb-1;
}

h5.h-border, h6.h-border {
    @extend .border-bottom;
    @extend .border-primary;
    @extend .pb-1;
}

/* ***
 * Forms
 * *** */

/* In case we do no want to show check boxes */
.hiddenCheckboxes input[type=checkbox]
{
    display: none;
}

input[type=checkbox]:checked + div.publisherCriterionBox
{
    @extend .border-2;
    @extend .rounded;
    @extend .border-tertiary;
}
