/*
    COLOURS: Change to update all instances below
    */
   
:root {
    --win-border-dark: #C4C3BC;
    --win-border-light: #E8E8E6;
    --win-bg: #D6D6D6;
    --win-shadow: #00000050;
 
    --win-titlebar-gradient: linear-gradient(60deg, #002666, #1AA0C7);
    --win-titlebar-text: #FFF;
 
    --win-dropdown-hover-bg: #49A4CC;
    --win-dropdown-hover-text: #FFF;
    --win-dropdown-focus-bg: #002666;
    --win-dropdown-focus-text: #FFF;
 
    --win-button-hover-bg: #C4C3BC;
    --win-button-hover-text: #FFF;
      }


    /* 
    Main Window/Modal 
    */

.aesthetic-windows-95-container,
.aesthetic-windows-95-modal {
  display: block;
    padding: 4px;
    background-color: var(--win-bg);
    border: 1px solid var(--win-border-dark);
    border-top: 1px solid var(--win-border-light);
    border-left: 1px solid var(--win-border-light);
    box-shadow: 1px 1px 0.5px 0.5px var(--win-shadow);
}

        /* Top Bar Design */
        
.aesthetic-windows-95-modal .aesthetic-windows-95-modal-title-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 24px;
    padding: 0 4px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background: var(--win-titlebar-gradient); /* Top Bar Colour */
    border: 1px solid;
    border-top: 1px solid var(--win-border-light);
    border-left: 1px solid var(--win-border-light);
    box-shadow: 1px 1px 0.5px 0.5px var(--win-shadow);
    outline: 0;
}

.aesthetic-windows-95-modal .aesthetic-windows-95-modal-title-bar .aesthetic-windows-95-modal-title-bar-text {
    color: var(--win-titlebar-text);
}

.aesthetic-windows-95-modal .aesthetic-windows-95-modal-content {
    padding: 5px 10px;
}

        /* Fake Exit Button - X in Title Bar */

.aesthetic-windows-95-modal-title-bar-controls .aesthetic-windows-95-button-title-bar {
    width: 16px;
    height: 16px;
    padding: 2px;
    font-size: 0.8rem;
    font-family: sans-serif;
    font-weight: normal;
    cursor: default;
}
 
.aesthetic-windows-95-button-title-bar button {
    padding: 0;
}


    /* 
    Buttons (Button 2 Custom Hover) 
    */

.aesthetic-windows-95-button,
.aesthetic-windows-95-button2,
.aesthetic-windows-95-button-title-bar,
.aesthetic-windows-95-taskbar .aesthetic-windows-95-taskbar-start,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    text-align: center;
    color: #000;
    background-color: var(--win-bg);
    border: 1px solid var(--win-border-dark);
    border-top-color: var(--win-border-light);
    border-left-color: var(--win-border-light);
    border-bottom-color: var(--win-border-dark);
    border-right-color: var(--win-border-dark);
    box-shadow: 1px 1px 0.5px 0.5px var(--win-shadow);
}
 
.aesthetic-windows-95-button {
    padding: 2px;
}
 
.aesthetic-windows-95-button button,
.aesthetic-windows-95-button2 button,
.aesthetic-windows-95-button-title-bar button,
.aesthetic-windows-95-taskbar .aesthetic-windows-95-taskbar-start button,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2 button {
    width: 100%;
    padding: 2px;
    color: inherit;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
}
 
.aesthetic-windows-95-button:active,
.aesthetic-windows-95-button2:active,
.aesthetic-windows-95-button-title-bar:active,
.aesthetic-windows-95-taskbar .aesthetic-windows-95-taskbar-start:active,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2:active {
    outline: none;
    transform: translateY(1px);
    box-shadow: 1px 1px var(--win-shadow);
}
 
.aesthetic-windows-95-button:focus,
.aesthetic-windows-95-button2:focus,
.aesthetic-windows-95-button-title-bar:focus,
.aesthetic-windows-95-taskbar .aesthetic-windows-95-taskbar-start:focus,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2:focus {
    outline: none;
}
 
/* Button2 is the only variant with a hover state */
.aesthetic-windows-95-button2 button:hover,
.aesthetic-windows-95-button-title-bar2 button:hover,
.aesthetic-windows-95-taskbar2 .aesthetic-windows-95-taskbar-start2 button:hover {
    background-color: var(--win-button-hover-bg);
    color: var(--win-button-hover-text);
}


    /* 
    Dropdown Menu 
    */

.aesthetic-windows-95-dropdown {
    position: relative;
    display: inline-block;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-trigger {
    padding: 1px 4px;
    color: inherit;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-trigger:focus {
    background-color: var(--win-dropdown-focus-bg);
    color: var(--win-dropdown-focus-text);
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu {
    display: none;
    position: absolute;
    z-index: 1;
    min-width: 150px;
    margin: 0;
    padding: 4px;
    list-style-type: none;
    background-color: var(--win-bg);
    border: 1px solid var(--win-border-dark);
    border-top: 1px solid var(--win-border-light);
    border-left: 1px solid var(--win-border-light);
    box-shadow: 1px 1px 0.5px 0.5px var(--win-shadow);
}
 
.aesthetic-windows-95-dropdown:focus-within .aesthetic-windows-95-dropdown-menu,
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu.is-active,
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu:hover,
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu:focus,
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu:focus-within {
    display: block;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu hr {
    border-color: #fff;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item {
    padding: 1px 0 1px 10px;
    cursor: pointer;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item button {
    color: inherit;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
}
 
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item:hover,
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item:focus,
.aesthetic-windows-95-dropdown .aesthetic-windows-95-dropdown-menu .aesthetic-windows-95-dropdown-menu-item:focus-within {
    background-color: var(--win-dropdown-hover-bg);
    color: var(--win-dropdown-hover-text);
}


    /* 
    Text Input 
    */

.aesthetic-windows-95-text-input {
    border: 1px solid var(--win-border-dark);
    border-top-color: var(--win-border-light);
    border-left-color: var(--win-border-light);
    border-bottom-color: var(--win-border-dark);
    border-right-color: var(--win-border-dark);
}
 
.aesthetic-windows-95-text-input:focus {
    outline: none;
}