/* macOS 8 Design Playground Styles */

/* ============================================
   PIXELATED RENDERING FOR RETRO LOOK
   ============================================ */

/* Apply pixelated rendering to all images and backgrounds */
.mac-window,
.mac-button,
.mac-input,
.mac-checkbox,
.custom-component-area,
.window-titlebar,
.titlebar-button,
.titlebar-stripes {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Pixelated fonts - use bitmap-style fonts */
.mac-window *,
.mac-button,
.mac-input,
.mac-checkbox,
.custom-component-area * {
    font-family: 'Sysfont', 'Wordpress', monospace;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
}

/* Page-specific styles */
.playground-container h1 {
    color: #000000;
    margin-bottom: 8px;
    font-size: 24px;
    font-family: 'Sysfont', serif;
}

.subtitle {
    color: #666666;
    margin-bottom: 40px;
    font-size: 14px;
    font-family: 'Sysfont', serif;
}

.custom-component-area h2 {
    color: #000000;
    font-size: 14px;
    margin-bottom: 16px;
    font-family: 'Sysfont', serif;
}

/* ============================================
   macOS 8 WINDOW STYLING
   ============================================ */

.mac-window {
  margin: 0 auto;
  padding: 3px;
  position: relative;
    background-color: #dddddd;
    box-shadow: 
        /* Top and Left borders */
        inset 1px 1px 0 0 rgba(170, 170, 170, 0.7),
        inset 2px 2px 0 0 #000000,
        inset 3px 3px 0 0 #e5e5e5,
        /* Bottom and Right borders */
        inset -1px -1px 0 0 #000000,
        inset -2px -2px 0 0 #595959,
        inset -3px -3px 0 0 #bfbfbf, 
        4px 4px 0 0 #000000;
    margin-bottom: 40px;
}

/* Hoverable window - hidden state by default */
.mac-window.hoverable {
    box-shadow: none !important;
    box-shadow: 
        /* Top and Left borders */
        inset 1px 1px 0 0 rgba(170, 170, 170, 0.4),
        inset 2px 2px 0 0 #7d7d7d,
        inset 3px 3px 0 0 #c5c5c5,
        /* Bottom and Right borders */
        inset -1px -1px 0 0 #afafaf,
        inset -2px -2px 0 0 #777777,
        3px 3px 0 0 #7d7d7d !important;
    background-color: #e7e7e7 !important;
}

.mac-window.hoverable .window-content {
    box-shadow: none !important;
    border: 2px solid #cccccc;
}

.mac-window.hoverable .window-titlebar {
background-color: #e7e7e7 !important;
}

.mac-window.hoverable .titlebar-stripes {
    opacity: 0;
}

.mac-window.hoverable .titlebar-button {
    opacity: 0;
}

.mac-window.hoverable .titlebar-title,
.mac-window.hoverable .window-content,
.mac-window.hoverable .window-content p,
.mac-window.hoverable .window-content * {
    color: #999999;
    box-shadow: none !important;
}

/* Hoverable window - show full design on hover */
.mac-window.hoverable:hover {
    opacity: 1;
    box-shadow: 
        /* Top and Left borders */
        inset 1px 1px 0 0 rgba(170, 170, 170, 0.7),
        inset 2px 2px 0 0 #000000,
        inset 3px 3px 0 0 #e5e5e5,
        /* Bottom and Right borders */
        inset -1px -1px 0 0 #000000,
        inset -2px -2px 0 0 #595959,
        inset -3px -3px 0 0 #bfbfbf, 
        4px 4px 0 0 #000000 !important;
}

.mac-window.hoverable:hover .window-content {
    box-shadow: 
        /* Top and Left borders */
        inset 1px 1px 0 0 #cecece,
        inset 2px 2px 0 0 #a1a1a1,
        inset 3px 3px 0 0 #1a1a1a,
        inset 4px 4px 0 0 #b2b2b2,  
        inset 5px 5px 0 0 #f4f4f4, 
        /* Bottom and Right borders */
        inset -1px -1px 0 0 #aaaaaa,
        inset -2px -2px 0 0 #323232,
        inset -3px -3px 0 0 #808080, 
        inset -4px -4px 0 0 #f4f4f4 !important;
    border: none;
}

.mac-window.hoverable:hover .window-titlebar {
background-color: #dddddd !important;
}

.mac-window.hoverable:hover .titlebar-stripes {
    opacity: 1;
}

.mac-window.hoverable:hover .titlebar-button {
    opacity: 1;
}

.mac-window.hoverable:hover .titlebar-title {
    color: #000000;
}

.mac-window.hoverable:hover .window-content,
.mac-window.hoverable:hover .window-content p,
.mac-window.hoverable:hover .window-content * {
    color: #000000;
}

/* Window Titlebar */
.window-titlebar {
    background: #dadada;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    height: 22px;
    position: relative;
}

.titlebar-buttons {
    display: flex;
    margin-right: -6px;
    margin-left: -6px;
}

.titlebar-button {
    width: 16px;
    height: 14px;
    border-radius: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
}

.titlebar-button.close {
    background-image: url('/assets/images/titlebar-close.png');
}

.titlebar-button.minimize {
    background-image: url('/assets/images/titlebar-minimize.png');
}
.titlebar-button.tabify {
    background-image: url('/assets/images/titlebar-tabify.png');
}
.titlebar-title {
    font-size: 1em;
    font-weight: bold;
    color: #000000;
    flex-shrink: 0;
    padding: 0 -2px;
}

.titlebar-stripes {
    flex: 1;
    height: 12px;
background: repeating-linear-gradient(
    to bottom,
    #aaaaaa 0px,  #aaaaaa 1px,
    #cacaca 1px,  #cacaca 2px,
    #dfdfdf 2px,  #dfdfdf 3px,
    #a1a1a1 3px,  #a1a1a1 4px,
    #f4f4f4 4px,  #f4f4f4 5px,
    #b6b6b6 5px,  #b6b6b6 6px,
    #cacaca 6px,  #cacaca 7px,
    #dfdfdf 7px,  #dfdfdf 8px,
    #a1a1a1 8px,  #a1a1a1 9px,
    #f4f4f4 9px,  #f4f4f4 10px,
    #b6b6b6 10px, #b6b6b6 11px,
    #cacaca 11px, #cacaca 12px,
    #dfdfdf 12px, #dfdfdf 13px,
    #a1a1a1 13px, #a1a1a1 14px,
    #f4f4f4 14px, #f4f4f4 15px,
    #e5e5e5 15px, #e5e5e5 16px,
    #dadada 16px, #dadada 17px
);

    margin-left: 8px;
    margin-right: 8px;
}

/* Window Content */
.window-content {
    padding: 16px;
    background-image: url('/assets/images/macos-app-background.png');
    min-height: 100px;
    margin: 0 4px 4px 4px;
    box-shadow: 
        /* Top and Left borders */
        inset 1px 1px 0 0 #cecece,
        inset 2px 2px 0 0 #a1a1a1,
        inset 3px 3px 0 0 #1a1a1a,
        inset 4px 4px 0 0 #b2b2b2,  
        inset 5px 5px 0 0 #f4f4f4, 
        /* Bottom and Right borders */
        inset -1px -1px 0 0 #aaaaaa,
        inset -2px -2px 0 0 #323232,
        inset -3px -3px 0 0 #808080, 
        inset -4px -4px 0 0 #f4f4f4;
}

.window-content p {
    font-size: 12px;
    color: #000000;
    line-height: 1.5;
}

/* ============================================
   CUSTOM COMPONENT AREA
   ============================================ */

.custom-component-area {
    background-color: #dddddd;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #888888;
    border-bottom: 2px solid #888888;
    box-shadow: 1px 1px 0 0 #000000;
    padding: 20px;
}

.component-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: center;
}

/* ============================================
   macOS 8 BUTTON
   ============================================ */
/* Buttons */
.mac-button {
    display: inline-block;
    padding: 0px 4px;
    width: auto;
    text-decoration: none;
    font-weight: 100;
    font-size: 0.9rem;
    letter-spacing: 0px;
    font-family: 'Sysfont', serif;
    color: #000000;
    background: #ddd;
    cursor: pointer;
    border: 6px solid transparent;
    border-image: url('/assets/images/button-border.png') 6 round;
}

.mac-button:hover {
    background-color: #eeeeee;
}

.mac-button:active {
    color: #ffffff; 
    background-color: #878787;
    border: 6px solid transparent;
    border-image: url('/assets/images/button-active-border.png') 6 round;
    cursor: pointer;
}

/* Default button (with black outline) */
.mac-button-default {
    display: inline-block;
    padding: 0px 4px;
    width: auto;
    text-decoration: none;
    font-weight: 100;
    font-size: 0.9rem;
    letter-spacing: 0px;
    font-family: 'Sysfont', serif;
    color: #000000;
    background: #ddd;
    border: 10px solid transparent;
    border-image: url('/assets/images/button-default-border.png') 10 round;
    cursor: pointer;
}

.mac-button-default:active {
    border: 10px solid transparent;
    background-color: #878787;
    border-image: url('/assets/images/button-default-active-border.png') 10 round;
    cursor: pointer;
}
/* ============================================
   macOS 8 TEXT INPUT
   ============================================ */

.mac-input {
    font-family: inherit;
    font-size: 12px;
    padding: 4px 8px;
    background-color: #ffffff;
    border-top: 2px solid #888888;
    border-left: 2px solid #888888;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    box-shadow: inset 1px 1px 0 0 #000000;
    outline: none;
    min-width: 200px;
}

.mac-input:focus {
    outline: 1px solid #000000;
}

/* ============================================
   macOS 8 CHECKBOX
   ============================================ */

.mac-checkbox {
    display: flex;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.mac-checkbox input {
    display: none;
}

.mac-checkbox .checkmark {
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    border-top: 2px solid #888888;
    border-left: 2px solid #888888;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    box-shadow: inset 1px 1px 0 0 #000000;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mac-checkbox input:checked + .checkmark::after {
    content: '✓';
    font-size: 10px;
    font-weight: bold;
    color: #000000;
}

/* macOS 8 Dropdown */
.mac-dropdown {
    font-family: 'Sysfont', 'Wordpress', monospace;
    font-size: 12px;
    padding: 0px 4px;
    background-color: #e7e7e7;
    color: #000000;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 6px solid transparent;
    border-image: url('/assets/images/button-border.png') 6 round;
    background-image: url('/assets/images/dropdown-arrows.png');
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 16px;
    padding-right: 24px;
}

.mac-dropdown:active,
.mac-dropdown.active {
    color: #ffffff;
    background-color: #878787;
    border: 6px solid transparent;
    border-image: url('/assets/images/button-active-border.png') 6 round;
}

/* macOS 8 Dropdown Options */
.mac-dropdown option {
    background-color: #e7e7e7;
    color: #000000;
    padding: 5px 0;
    line-height: 1.5;
}

.mac-dropdown option:hover {
    background-color: #5454B3;
    color: #ffffff;
}

.mac-dropdown option:checked {
    background-color: #5454B3;
    color: #ffffff;
}

/* macOS 8 Radio Button */
.mac-radio {
    display: flex;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.mac-radio input {
    display: none;
}

.mac-radio .radio-dot {
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    border-radius: 50%;
    border-top: 2px solid #888888;
    border-left: 2px solid #888888;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    box-shadow: inset 1px 1px 0 0 #000000;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mac-radio input:checked + .radio-dot::after {
    content: '';
    width: 4px;
    height: 4px;
    background-color: #000000;
    border-radius: 50%;
}


/* Scrollbar Styling - macOS 8 Retro Style with Images */
/* Firefox */
/* width */
::-webkit-scrollbar {
  width: 40px;
    cursor: url("/assets/images/cursor-default.svg") 8 8, auto !important;

}

/* Track */
::-webkit-scrollbar-track {
  background-image: url('/assets/images/scrollbar-background.png');
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  width: 32px;
  /* Add the image in the center */
  background-image: url('/assets/images/thumb.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto; /* keep natural size */

  outline: 4px solid #000000; /* base color */
  outline-offset: -4px;
  background-color: #9996FF; /* base color */
  border-bottom: 8px solid #6563CF;
  border-right: 7px solid #6563CF;
  border-left: 8px solid #CCCBFF;
  border-top: 7px solid #CCCBFF;
  position: relative;
}
::-webkit-scrollbar-thumb:active {
  width: 32px;
  /* Add the image in the center */
  background-image: url('/assets/images/thumb-active.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto; /* keep natural size */

  outline: 4px solid #000000; /* base color */
  outline-offset: -4px;
  background-color: #6563CF; /* base color */
  border-bottom: 8px solid #322E9C;
  border-right: 7px solid #322E9C;
  border-left: 8px solid #CCCBFF;
  border-top: 7px solid #9996FF;
  position: relative;
}

/* Up */
/* Big web scrollbar is different than the others */
body::-webkit-scrollbar-button:single-button:vertical:decrement {
  height: 80px;
  width: 40px; 
  background-image: url('/assets/images/big-scrollbar-decrement.png');
  background-position: center 0px;
}

body::-webkit-scrollbar-button:single-button:vertical:decrement:active {
  height: 80px;
  width: 40px; 
  background-image: url('/assets/images/big-scrollbar-decrement-active.png');
  background-position: center 0px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  height: 40px;
  width: 40px; 
  background-image: url('/assets/images/scrollbar-decrement.png');
  background-position: center 0px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
  height: 40px;
  width: 40px; 
  background-image: url('/assets/images/scrollbar-decrement-active.png');
  background-position: center 0px;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  height: 39px;
  width: 40px; 
  background-image: url('/assets/images/scrollbar-increment.png');
  background-position: center 0px;
}

::-webkit-scrollbar-button:vertical:single-button:increment:active {
  height: 39px;
  width: 40px; 
  background-image: url('/assets/images/scrollbar-increment-active.png');
  background-position: center 0px;
}
/* Handle on hover */
/*::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}*/

            /* BIG PIXEL CURSOR  */ 
        /* Default cursor */
html,
html *{
  cursor: url("/assets/images/cursor-default.svg") 2 0, auto;
}

/* Text cursor */
html p,
h1,
h2,
h3,
h4,
h5,
h6,
input[type="text"],
input[type="email"],
textarea,
span,
[data-text] {
  cursor: url("../assets/images/cursor-text.svg") 9 19, text;
}

/* Hover cursor */
html a,
html a *,
html g,
html button,
html button *,
html input[type="submit"],
html input[type="submit"] *,
html input[type="button"],
html input[type="button"] *,
html [data-submit],
html [data-submit] *,
html [data-hover],
html [data-hover] * {
  cursor: url("../assets/images/cursor-pointer.svg") 12 0, pointer;
}

/* ============================================
   YOUR CUSTOM COMPONENTS GO HERE
   ============================================ */

/* Example: Add your macOS 8 styled components below */


/* ============================================
   YELLOWSCALE COLOR SCHEME
   ============================================ */

.yellowscale .mac-window {
    background-color: #FFF8D6;
    box-shadow: 
        inset 1px 1px 0 0 #FEF0C5,
        inset 2px 2px 0 0 #F6CB2F,
        inset 3px 3px 0 0 #F4C005,
        inset -1px -1px 0 0 #FAE085,
        inset -2px -2px 0 0 #F4C005,
        inset -3px -3px 0 0 #F6CB2F, 
        4px 4px 0 0 rgba(120, 68, 0, 0.9);
}

.yellowscale .window-titlebar {
    background: #FFF8D6;
}

.yellowscale .titlebar-title{
    color: #ffa200;
}

.yellowscale .titlebar-stripes {
    background-image: url('/macos8-playground/yellowscale/titlebar-stripes.png')
}

.yellowscale .titlebar-button.close {
    background-image: url('/macos8-playground/yellowscale/titlebar-close.png');
}
.yellowscale .titlebar-button.close:active {
    background-image: url('/macos8-playground/yellowscale/titlebar-close-active.png');
}

.yellowscale .titlebar-button.minimize:active {
    background-image: url('/macos8-playground/yellowscale/titlebar-minimize-active.png');
}
.yellowscale .titlebar-button.minimize {
    background-image: url('/macos8-playground/yellowscale/titlebar-minimize.png');
}

.yellowscale .titlebar-button.tabify {
    background-image: url('/macos8-playground/yellowscale/titlebar-tabify.png');
}
.yellowscale .titlebar-button.tabify:active {
    background-image: url('/macos8-playground/yellowscale/titlebar-tabify-active.png');
}

.yellowscale .window-content {
    background-image: url('/macos8-playground/yellowscale/macos-app-background.png');
    box-shadow: 
        inset 1px 1px 0 0 #FEF0C5,
        inset 2px 2px 0 0 #F6CB2F,
        inset 3px 3px 0 0 #F4C005,
        inset 4px 4px 0 0 #FAE085,  
        inset -1px -1px 0 0 #FAE085,
        inset -2px -2px 0 0 #F4C005,
        inset -3px -3px 0 0 #F6CB2F, 
        inset -4px -4px 0 0 #FEF0C5;
    background-color: #FFF8D6;
}


.yellowscale .mac-button {
    background-color: #f4d03f;
    border: 6px solid transparent;
    border-image: url('/assets/images/button-border.png') 6 round;
}

.yellowscale .mac-button:active,
.yellowscale .mac-button.active {
    color: #3d2817;
    background-color: #daa520;
    border: 6px solid transparent;
    border-image: url('/assets/images/button-active-border.png') 6 round;
}

.yellowscale .mac-input {
    background-color: #fffacd;
    color: #3d2817;
    border: 6px solid transparent;
    border-image: url('/assets/images/button-border.png') 6 round;
}

.yellowscale .mac-dropdown {
    background-color: #f4d03f;
    color: #3d2817;
    border: 6px solid transparent;
    border-image: url('/assets/images/button-border.png') 6 round;
}

.yellowscale .mac-dropdown:active,
.yellowscale .mac-dropdown.active {
    color: #fffacd;
    background-color: #daa520;
    border: 6px solid transparent;
    border-image: url('/assets/images/button-active-border.png') 6 round;
}

.yellowscale .mac-dropdown option {
    background-color: #f4d03f;
    color: #3d2817;
}

.yellowscale .mac-dropdown option:hover {
    background-color: #daa520;
    color: #fffacd;
}

.yellowscale .mac-dropdown option:checked {
    background-color: #daa520;
    color: #fffacd;
}

.yellowscale .mac-checkbox input:checked + .checkmark::after {
    color: #3d2817;
}

.yellowscale .mac-radio input:checked + .radio-dot::after {
    background-color: #3d2817;
}