@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap');
@import url("../fonts/DDT/ddt.css");

:root{
  --clr-primary: oklch(0.649 0.237 26.973);
}

html {
  box-sizing: border-box;
}

*::before,
*,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html,body{
  height: 100%;
}

body{
  display: flex;
  flex-direction: column;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
  "slnt" 0;
  background: #d9d9d9;
  overflow: hidden;
  &:before {
    content: '';
    z-index: 4010;
    width : 100%;
    height : 100%;
    position : absolute;
    top : 0px;
    left : 0px;
    background: linear-gradient(#444 50%, #111 50%);
    background-size: 100% 4px;
    background-repeat: repeat-y;
    opacity: .24;
    box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
    animation: pulse 5s linear infinite;
    pointer-events: none;
  }
}

.menubar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--clr-primary);
  color: white;
  padding: 0 10px;
  font-family: "DDT", "Inter", sans-serif;
  max-height: 50px;
  .menubar__item{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: center;
    border: unset;
    background: unset;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    padding: 8px 10px;
    gap: 4px;
    &:is(button,a){
      &:active{
        background: hsl(0 0% 20% / .5);
      }
    }
    transition: all .1s ease-in-out;
  }
}
.workspace{
  flex: 1;
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 1fr 200px;
  gap: 10px 10px;
  grid-template-areas:
    "w1 w3"
    "w2 w3";
  padding: 10px;
  background: oklch(0.3 0 0);
  .window{
    display: flex;
    flex-direction: column;
    .window__header{
      display: flex;
      align-items: center;
      padding: 5px;
      gap: 8px;
      min-height: 32px;
      color: white;
      background: var(--clr-primary);
      >*{
        display: flex;
        gap: 8px;
      }
      .header__left{
        flex: 1;
      }
    }
    .window__body{
      display: flex;
      flex-direction: column;
      flex: 1;
      border: 5px solid var(--clr-primary);
      border-top: none;
      background: oklch(0.3 0 0);
      .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        color: unset;
        background: hsl(0 0 100% / .2);
        text-decoration: unset;
        padding: 2px 8px;
      }
    }
  }
  .window__launcher{
    grid-area: w1;
    width: 250px;
    .launcher__menu{
      list-style-type: none;
      margin: 0;
      padding: 0;
      .menu__item.active + .nested,.menu__item[data-toggle="folder-expand"] + .nested{
        display: block;
      }
      .nested {
        display: none;
      }
      .menu__item{
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
        padding: 5px;
        color: white;
        text-decoration: unset;
        background: oklch(1 0 0 / .05);
        &:hover{
          background: hsl(0 0% 100% / .2);
        }
        &:active,&.active{
          background: white;
          color: black;
        }
        transition: all .2s ease-in-out;
        .start,.end{
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 16px;
        }
        .body{
          flex: 1;
        }
        &.unavailable{
          color: hsl(0 0 100 / .2);
          pointer-events: none;
          cursor: not-allowed;
        }
      }
    }
  }
  .window__radio{
    grid-area: w2;
    width: 250px;
    audio,iframe{
      width: 100%;
    }
    .window__body{
      align-items: center;
      justify-content: center;
      padding: 5px;
    }
  }
  .window__browser{
    grid-area: w3;
    .window__body{
      color: white;
    }
  }
}
.icn{
  display: inline-block;
  width: 1em;
  height: 1em;
  &.icn-nexus{
    background: url("../img/nexus.svg") center / contain no-repeat;
  }
}

@keyframes pulse {
  0%   {transform: scale(1.001);  opacity: .24; }
  8%   {transform: scale(1.000);  opacity: .23; }
  15%  {transform: scale(1.004);  opacity: .24; }
  30%  {transform: scale(1.002);  opacity: .21; }
  100% {transform: scale(1.000);  opacity: .24; }
}