// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "functions";

// 2. Include any default variable overrides here
$ey-literacy: #ebde34;
$display-font-weight: 600;
$ml-font-label-weight: 500;

// 3. Include remainder of required Bootstrap stylesheets
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";

// 4. Include any optional Bootstrap components as you like
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "buttons";
@import "badge";

// 5. Add additional custom code here
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.my-card-text {
  color: #444444;
  font-size: 0.9rem;
}

.ey-literacy {
  background-color: $ey-literacy;
  color: black;
}

.ey-literacy_border {
  border-color: $ey-literacy;
  border-width: 0.6em;
}

.form-label {
  font-weight: $ml-font-label-weight;
}


// These are the colours we need to colourise categories:

// - English as a Foreign Language: cyan
// - Literacy: green
// - Maths: magenta
// - English: red
// - EYs Maths: #343aeb
// - EYs Literacy: #ebde34
// - Alphabet: no colour yet

.category_colour_efl {
    color: cyan;
}

.category_colour_literacy {
    color: green;
}

.category_colour_maths {
    color: magenta;
}

.category_colour_eymaths {
    color: #343aeb  ;
}

.category_colour_eyliteracy {
    color: #ebde34 ;
}

.category_colour_alphabet {
    color: black ;
}


.asteriskField {
  color: red;
}

// for the SVG icons
.gray-icon {
    svg {
        path {
            fill: #808080; /* Adjust this hex value to any desired shade of gray */
        }
    }
}

.empty-basket-button {
  background-color: lightgray;
  border: none;
  padding: 8px;
  display: flex;
}

.full-basket-button {
  background-color: lightgreen;
  border: none;
  padding: 8px;
  display: flex;
}

// 6. Add additional Bootstrap components as needed
@import "alert";
@import "card";

// 7. Import utilities API last to generate utility classes
@import "utilities/api";