/*******************************
 * student-buttons.css
 * 3D-style buttons for student interface
 *******************************/

/* Base Button Styles
 *******************************/
.btn {
    border: none;
    border-radius: var(--border-radius, 0.85rem);
    cursor: pointer;
    line-height: 1.5;
    padding: 0.5rem 1.5rem 0.75rem;
    box-shadow:
        inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.1),
        inset 0 -0.25rem 0 rgba(0, 0, 0, 0.2);
    transition:
        transform 0.1s ease,
        background-color 0.1s ease,
        box-shadow 0.2s ease;
}

/* Button States
 *******************************/
.btn:hover {
    transform: translateY(-1px);
}

.btn:focus {
    outline: none;
}

.btn:active {
    transform: translateY(1px);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    box-shadow:
        inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.1),
        inset 0 0.125rem 0 rgba(0, 0, 0, 0.1);
}

/* Button Variants
 *******************************/
/* Primary */
.btn.btn-primary {
    background-color: var(--md-yellow-400);
    color: var(--black);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-yellow-600),
        inset 0 -0.25rem 0 var(--md-yellow-600);
}

.btn.btn-primary:hover {
    background-color: var(--md-yellow-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-yellow-600),
        inset 0 -0.25rem 0 var(--md-yellow-700),
        0 0 0 0.2rem rgba(253, 216, 53, 0.25);
}

.btn.btn-primary:active,
.btn.btn-primary:focus:active {
    background-color: var(--md-yellow-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-yellow-600),
        inset 0 0.125rem 0 var(--md-yellow-700);
}

.btn.btn-primary:disabled,
.btn.btn-primary.disabled,
.btn.btn-primary:disabled:hover,
.btn.btn-primary.disabled:hover {
    background-color: var(--md-yellow-100);
    color: var(--md-yellow-700) !important;
    cursor: not-allowed;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-yellow-100),
        inset 0 -0.25rem 0 var(--md-yellow-400);
    transform: none;
}

/* Secondary */
.btn.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-500),
        inset 0 -0.25rem 0 var(--md-deep-orange-600);
}

.btn.btn-secondary:hover {
    background-color: var(--secondary-color-dark);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-600),
        inset 0 -0.25rem 0 var(--md-deep-orange-800),
        0 0 0 0.2rem var(--secondary-color-rgba-50);
}

.btn.btn-secondary:active,
.btn.btn-secondary:focus:active {
    background-color: var(--secondary-color-dark) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-600),
        inset 0 0.125rem 0 var(--md-deep-orange-800);
}

.btn.btn-secondary:disabled,
.btn.btn-secondary.disabled,
.btn.btn-secondary:disabled:hover,
.btn.btn-secondary.disabled:hover {
    background-color: var(--md-deep-orange-100);
    color: var(--md-deep-orange-400);
    cursor: not-allowed;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-100),
        inset 0 -0.25rem 0 var(--md-deep-orange-200);
    transform: none;
}

/* Light */
.btn.btn-light {
    background-color: var(--md-gray-50);
    color: var(--md-gray-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-gray-300),
        inset 0 -0.25rem 0 var(--md-gray-300);
}

.btn.btn-light:hover {
    background-color: var(--md-gray-200);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-gray-300),
        inset 0 -0.25rem 0 var(--md-gray-400),
        0 0 0 0.2rem rgba(189, 189, 189, 0.25);
}

.btn.btn-light:active {
    background-color: var(--md-gray-200);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-gray-300),
        inset 0 0.125rem 0 var(--md-gray-400);
}

.btn.btn-light:disabled,
.btn.btn-light.disabled,
.btn.btn-light:disabled:hover,
.btn.btn-light.disabled:hover {
    background-color: var(--md-gray-50);
    color: var(--md-gray-500);
    cursor: not-allowed;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-gray-100),
        inset 0 -0.25rem 0 var(--md-gray-300);
    transform: none;
}

/* Info */
.btn.btn-info {
    background-color: var(--md-light-blue-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-light-blue-600),
        inset 0 -0.25rem 0 var(--md-light-blue-600);
}
.btn.btn-info:hover {
    background-color: var(--md-light-blue-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-light-blue-600),
        inset 0 -0.25rem 0 var(--md-light-blue-800),
        0 0 0 0.2rem rgba(41, 182, 246, 0.25);
}
.btn.btn-info:active,
.btn.btn-info:focus:active {
    background-color: var(--md-light-blue-600) !important;
    color: var(--md-light-blue-800);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-light-blue-600),
        inset 0 0.125rem 0 var(--md-light-blue-800);
}
.btn.btn-info:disabled,
.btn.btn-info.disabled,
.btn.btn-info:disabled:hover,
.btn.btn-info.disabled:hover {
    background-color: var(--md-light-blue-100);
    color: var(--md-light-blue-600);
    cursor: not-allowed;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-light-blue-100),
        inset 0 -0.25rem 0 var(--md-light-blue-400);
    transform: none;
}

.answer-box .btn.btn-light {
    color: var(--black);
}
/* Danger */
.btn.btn-danger {
    background-color: var(--danger-color);
    color: var(--white);
}

.btn.btn-danger:hover {
    background-color: var(--danger-color-dark);
    box-shadow:
        inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.1),
        inset 0 -0.25rem 0 rgba(0, 0, 0, 0.2),
        0 0 0 0.2rem var(--danger-color-rgba);
}

.btn.btn-danger:active {
    box-shadow:
        inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.1),
        inset 0 0.125rem 0 rgba(0, 0, 0, 0.1);
}



/* Themed Button Styles
 *******************************/
.btn.btn-themed,
[class*="theme-"] .btn.btn-themed {
    background-color: var(--theme-primary);
    color: var(--theme-text-on-dark);
    box-shadow:
        inset 0 0 0 0.0625rem var(--theme-dark),
        inset 0 -0.25rem 0 var(--theme-dark);
}

.btn.btn-themed:hover,
[class*="theme-"] .btn.btn-themed:hover {
    background-color: var(--theme-dark);
    box-shadow:
        inset 0 0 0 0.0625rem var(--theme-dark),
        inset 0 -0.25rem 0 var(--theme-darker),
        0 0 0 0.2rem var(--theme-rgba);
}

.btn.btn-themed:active,
.btn.btn-themed:focus:active,
[class*="theme-"] .btn.btn-themed:active,
[class*="theme-"] .btn.btn-themed:focus:active {
    background-color: var(--theme-dark) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--theme-dark),
        inset 0 0.125rem 0 var(--theme-darker);
}

.btn.btn-themed:disabled,
.btn.btn-themed.disabled,
[class*="theme-"] .btn.btn-themed:disabled,
[class*="theme-"] .btn.btn-themed.disabled {
    background-color: var(--theme-light);
    color: var(--theme-dark) !important;
    cursor: not-allowed;
    box-shadow:
        inset 0 0 0 0.0625rem var(--theme-light),
        inset 0 -0.25rem 0 var(--theme-primary);
    transform: none;
}

/* Direct Subject Button Classes
 *******************************/
/* Mathematics */
.btn.btn-mathematics {
    background-color: var(--md-red-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-red-600),
        inset 0 -0.25rem 0 var(--md-red-600);
}
.btn.btn-mathematics:hover {
    background-color: var(--md-red-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-red-600),
        inset 0 -0.25rem 0 var(--md-red-800),
        0 0 0 0.2rem rgba(239, 83, 80, 0.25);
}
.btn.btn-mathematics:active,
.btn.btn-mathematics:focus:active {
    background-color: var(--md-red-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-red-600),
        inset 0 0.125rem 0 var(--md-red-800);
}
.btn.btn-mathematics:disabled,
.btn.btn-mathematics.disabled {
    background-color: var(--md-red-100);
    color: var(--md-red-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-red-100),
        inset 0 -0.25rem 0 var(--md-red-400);
}

/* English */
.btn.btn-english {
    background-color: var(--md-light-blue-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-light-blue-600),
        inset 0 -0.25rem 0 var(--md-light-blue-600);
}
.btn.btn-english:hover {
    background-color: var(--md-light-blue-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-light-blue-600),
        inset 0 -0.25rem 0 var(--md-light-blue-800),
        0 0 0 0.2rem rgba(41, 182, 246, 0.25);
}
.btn.btn-english:active,
.btn.btn-english:focus:active {
    background-color: var(--md-light-blue-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-light-blue-600),
        inset 0 0.125rem 0 var(--md-light-blue-800);
}
.btn.btn-english:disabled,
.btn.btn-english.disabled {
    background-color: var(--md-light-blue-100);
    color: var(--md-light-blue-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-light-blue-100),
        inset 0 -0.25rem 0 var(--md-light-blue-400);
}

/* French */
.btn.btn-french {
    background-color: var(--md-blue-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-blue-600),
        inset 0 -0.25rem 0 var(--md-blue-600);
}
.btn.btn-french:hover {
    background-color: var(--md-blue-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-blue-600),
        inset 0 -0.25rem 0 var(--md-blue-800),
        0 0 0 0.2rem rgba(66, 165, 245, 0.25);
}
.btn.btn-french:active,
.btn.btn-french:focus:active {
    background-color: var(--md-blue-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-blue-600),
        inset 0 0.125rem 0 var(--md-blue-800);
}
.btn.btn-french:disabled,
.btn.btn-french.disabled {
    background-color: var(--md-blue-100);
    color: var(--md-blue-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-blue-100),
        inset 0 -0.25rem 0 var(--md-blue-400);
}

/* Science */
.btn.btn-science {
    background-color: var(--md-deep-purple-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-purple-600),
        inset 0 -0.25rem 0 var(--md-deep-purple-600);
}
.btn.btn-science:hover {
    background-color: var(--md-deep-purple-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-purple-600),
        inset 0 -0.25rem 0 var(--md-deep-purple-800),
        0 0 0 0.2rem rgba(126, 87, 194, 0.25);
}
.btn.btn-science:active,
.btn.btn-science:focus:active {
    background-color: var(--md-deep-purple-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-purple-600),
        inset 0 0.125rem 0 var(--md-deep-purple-800);
}
.btn.btn-science:disabled,
.btn.btn-science.disabled {
    background-color: var(--md-deep-purple-100);
    color: var(--md-deep-purple-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-purple-100),
        inset 0 -0.25rem 0 var(--md-deep-purple-400);
}

/* History */
.btn.btn-history {
    background-color: var(--md-amber-400);
    color: var(--black);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-amber-600),
        inset 0 -0.25rem 0 var(--md-amber-600);
}
.btn.btn-history:hover {
    background-color: var(--md-amber-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-amber-600),
        inset 0 -0.25rem 0 var(--md-amber-800),
        0 0 0 0.2rem rgba(255, 202, 40, 0.25);
}
.btn.btn-history:active,
.btn.btn-history:focus:active {
    background-color: var(--md-amber-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-amber-600),
        inset 0 0.125rem 0 var(--md-amber-800);
}
.btn.btn-history:disabled,
.btn.btn-history.disabled {
    background-color: var(--md-amber-100);
    color: var(--md-amber-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-amber-100),
        inset 0 -0.25rem 0 var(--md-amber-400);
}

/* Geography */
.btn.btn-geography {
    background-color: var(--md-green-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-green-600),
        inset 0 -0.25rem 0 var(--md-green-600);
}
.btn.btn-geography:hover {
    background-color: var(--md-green-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-green-600),
        inset 0 -0.25rem 0 var(--md-green-800),
        0 0 0 0.2rem rgba(102, 187, 106, 0.25);
}
.btn.btn-geography:active,
.btn.btn-geography:focus:active {
    background-color: var(--md-green-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-green-600),
        inset 0 0.125rem 0 var(--md-green-800);
}
.btn.btn-geography:disabled,
.btn.btn-geography.disabled {
    background-color: var(--md-green-100);
    color: var(--md-green-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-green-100),
        inset 0 -0.25rem 0 var(--md-green-400);
}

/* Computing */
.btn.btn-computing {
    background-color: var(--md-purple-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-purple-600),
        inset 0 -0.25rem 0 var(--md-purple-600);
}
.btn.btn-computing:hover {
    background-color: var(--md-purple-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-purple-600),
        inset 0 -0.25rem 0 var(--md-purple-800),
        0 0 0 0.2rem rgba(171, 71, 188, 0.25);
}
.btn.btn-computing:active,
.btn.btn-computing:focus:active {
    background-color: var(--md-purple-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-purple-600),
        inset 0 0.125rem 0 var(--md-purple-800);
}
.btn.btn-computing:disabled,
.btn.btn-computing.disabled {
    background-color: var(--md-purple-100);
    color: var(--md-purple-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-purple-100),
        inset 0 -0.25rem 0 var(--md-purple-400);
}

/* Art Design */
.btn.btn-art-design {
    background-color: var(--md-pink-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-pink-600),
        inset 0 -0.25rem 0 var(--md-pink-600);
}
.btn.btn-art-design:hover {
    background-color: var(--md-pink-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-pink-600),
        inset 0 -0.25rem 0 var(--md-pink-800),
        0 0 0 0.2rem rgba(236, 64, 122, 0.25);
}
.btn.btn-art-design:active,
.btn.btn-art-design:focus:active {
    background-color: var(--md-pink-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-pink-600),
        inset 0 0.125rem 0 var(--md-pink-800);
}
.btn.btn-art-design:disabled,
.btn.btn-art-design.disabled {
    background-color: var(--md-pink-100);
    color: var(--md-pink-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-pink-100),
        inset 0 -0.25rem 0 var(--md-pink-400);
}

/* PSHE */
.btn.btn-pshe {
    background-color: var(--md-orange-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-orange-600),
        inset 0 -0.25rem 0 var(--md-orange-600);
}
.btn.btn-pshe:hover {
    background-color: var(--md-orange-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-orange-600),
        inset 0 -0.25rem 0 var(--md-orange-800),
        0 0 0 0.2rem rgba(255, 167, 38, 0.25);
}
.btn.btn-pshe:active,
.btn.btn-pshe:focus:active {
    background-color: var(--md-orange-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-orange-600),
        inset 0 0.125rem 0 var(--md-orange-800);
}
.btn.btn-pshe:disabled,
.btn.btn-pshe.disabled {
    background-color: var(--md-orange-100);
    color: var(--md-orange-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-orange-100),
        inset 0 -0.25rem 0 var(--md-orange-400);
}

/* Music */
.btn.btn-music {
    background-color: var(--md-pink-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-pink-600),
        inset 0 -0.25rem 0 var(--md-pink-600);
}
.btn.btn-music:hover {
    background-color: var(--md-pink-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-pink-600),
        inset 0 -0.25rem 0 var(--md-pink-800),
        0 0 0 0.2rem rgba(236, 64, 122, 0.25);
}
.btn.btn-music:active,
.btn.btn-music:focus:active {
    background-color: var(--md-pink-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-pink-600),
        inset 0 0.125rem 0 var(--md-pink-800);
}
.btn.btn-music:disabled,
.btn.btn-music.disabled {
    background-color: var(--md-pink-100);
    color: var(--md-pink-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-pink-100),
        inset 0 -0.25rem 0 var(--md-pink-400);
}

/* Foreign Languages */
.btn.btn-foreign-languages {
    background-color: var(--md-deep-orange-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-600),
        inset 0 -0.25rem 0 var(--md-deep-orange-600);
}
.btn.btn-foreign-languages:hover {
    background-color: var(--md-deep-orange-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-600),
        inset 0 -0.25rem 0 var(--md-deep-orange-800),
        0 0 0 0.2rem rgba(255, 112, 67, 0.25);
}
.btn.btn-foreign-languages:active,
.btn.btn-foreign-languages:focus:active {
    background-color: var(--md-deep-orange-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-600),
        inset 0 0.125rem 0 var(--md-deep-orange-800);
}
.btn.btn-foreign-languages:disabled,
.btn.btn-foreign-languages.disabled {
    background-color: var(--md-deep-orange-100);
    color: var(--md-deep-orange-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-100),
        inset 0 -0.25rem 0 var(--md-deep-orange-400);
}

/* Design Technology */
.btn.btn-design-technology {
    background-color: var(--md-deep-purple-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-purple-600),
        inset 0 -0.25rem 0 var(--md-deep-purple-600);
}
.btn.btn-design-technology:hover {
    background-color: var(--md-deep-purple-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-purple-600),
        inset 0 -0.25rem 0 var(--md-deep-purple-800),
        0 0 0 0.2rem rgba(126, 87, 194, 0.25);
}
.btn.btn-design-technology:active,
.btn.btn-design-technology:focus:active {
    background-color: var(--md-deep-purple-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-purple-600),
        inset 0 0.125rem 0 var(--md-deep-purple-800);
}
.btn.btn-design-technology:disabled,
.btn.btn-design-technology.disabled {
    background-color: var(--md-deep-purple-100);
    color: var(--md-deep-purple-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-purple-100),
        inset 0 -0.25rem 0 var(--md-deep-purple-400);
}

/* Citizenship */
.btn.btn-citizenship {
    background-color: var(--md-lime-400);
    color: var(--black);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-lime-600),
        inset 0 -0.25rem 0 var(--md-lime-600);
}
.btn.btn-citizenship:hover {
    background-color: var(--md-lime-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-lime-600),
        inset 0 -0.25rem 0 var(--md-lime-800),
        0 0 0 0.2rem rgba(212, 225, 87, 0.25);
}
.btn.btn-citizenship:active,
.btn.btn-citizenship:focus:active {
    background-color: var(--md-lime-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-lime-600),
        inset 0 0.125rem 0 var(--md-lime-800);
}
.btn.btn-citizenship:disabled,
.btn.btn-citizenship.disabled {
    background-color: var(--md-lime-100);
    color: var(--md-lime-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-lime-100),
        inset 0 -0.25rem 0 var(--md-lime-400);
}

/* Religious Education */
.btn.btn-religious-education {
    background-color: var(--md-deep-orange-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-600),
        inset 0 -0.25rem 0 var(--md-deep-orange-600);
}
.btn.btn-religious-education:hover {
    background-color: var(--md-deep-orange-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-600),
        inset 0 -0.25rem 0 var(--md-deep-orange-800),
        0 0 0 0.2rem rgba(255, 112, 67, 0.25);
}
.btn.btn-religious-education:active,
.btn.btn-religious-education:focus:active {
    background-color: var(--md-deep-orange-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-600),
        inset 0 0.125rem 0 var(--md-deep-orange-800);
}
.btn.btn-religious-education:disabled,
.btn.btn-religious-education.disabled {
    background-color: var(--md-deep-orange-100);
    color: var(--md-deep-orange-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-deep-orange-100),
        inset 0 -0.25rem 0 var(--md-deep-orange-400);
}

/* Physical Education */
.btn.btn-physical-education {
    background-color: var(--md-teal-400);
    color: var(--white);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-teal-600),
        inset 0 -0.25rem 0 var(--md-teal-600);
}
.btn.btn-physical-education:hover {
    background-color: var(--md-teal-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-teal-600),
        inset 0 -0.25rem 0 var(--md-teal-800),
        0 0 0 0.2rem rgba(38, 166, 154, 0.25);
}
.btn.btn-physical-education:active,
.btn.btn-physical-education:focus:active {
    background-color: var(--md-teal-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-teal-600),
        inset 0 0.125rem 0 var(--md-teal-800);
}
.btn.btn-physical-education:disabled,
.btn.btn-physical-education.disabled {
    background-color: var(--md-teal-100);
    color: var(--md-teal-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-teal-100),
        inset 0 -0.25rem 0 var(--md-teal-400);
}

/* Generic */
.btn.btn-generic {
    background-color: var(--md-amber-400);
    color: var(--black);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-amber-600),
        inset 0 -0.25rem 0 var(--md-amber-600);
}
.btn.btn-generic:hover {
    background-color: var(--md-amber-600);
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-amber-600),
        inset 0 -0.25rem 0 var(--md-amber-800),
        0 0 0 0.2rem rgba(255, 202, 40, 0.25);
}
.btn.btn-generic:active,
.btn.btn-generic:focus:active {
    background-color: var(--md-amber-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-amber-600),
        inset 0 0.125rem 0 var(--md-amber-800);
}
.btn.btn-generic:disabled,
.btn.btn-generic.disabled {
    background-color: var(--md-amber-100);
    color: var(--md-amber-600) !important;
    box-shadow:
        inset 0 0 0 0.0625rem var(--md-amber-100),
        inset 0 -0.25rem 0 var(--md-amber-400);
}