@import "globals.css";

#shortcuts-container {
  position: absolute;
  left: 20px;
  top: 20px;
  bottom: 80px;
  right: 20px;

  .shortcuts {
    &.external-links {
      position: absolute;
      top: 0;
      right: 0;
    }

    .shortcut {
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 96px;
      height: 96px;
      text-decoration: none;
      position: relative;

      .shortcut-icon {
        filter: brightness(0) saturate(100%) invert(86%) sepia(56%) saturate(7495%) hue-rotate(103deg) brightness(103%) contrast(104%);
        width: 64px;
        height: 64px;
      }

      .shortcut-title {
        color: var(--primary-text-color);
        font-family: "Enter Command", monospace;
        font-size: 0.6rem;
        margin-top: 5px;
      }

      &.external-link::after {
        content: "↗";
        color: var(--primary-text-color);
        font-size: 1rem;
        line-height: 0.6rem;
        width: 16px;
        height: 16px;
        position: absolute;
        bottom: 20px;
        right: 5px;
      }
    }
  }

}

.window {
  border: 2px solid var(--primary-color);
  background: var(--container-color);
  width: 80vmin;
  z-index: 1;
  position: absolute;
  display: flex;
  flex-direction: column;

  &.active {
    box-shadow: 0 0 20px var(--primary-color);
  }

  &#about-window,
  &#projects-window,
  &#links-window,
  &#shrines-window {
    display: none;
  }

  &#projects-window {
    width: 40vmin;
  }

  &#links-window {
    width: 60vmin;
  }

  .window-bar {
    display: flex;
    padding: 10px 20px 20px 20px;
    cursor: grab;

    &.dragging {
      cursor: grabbing;
    }

    .window-title {
      color: var(--primary-text-color);
      flex-grow: 1;
      font-family: 'Enter Command', monospace;
      font-size: 1rem;
      pointer-events: none;
      user-select: none;
    }

    .close-button {
      background: none;
      border: none;
      color: var(--primary-text-color);
      font-size: 1rem;
      font-family: 'Enter Command', monospace;
      cursor: pointer;
      padding: 0;
      height: fit-content;
      margin: auto;
    }
  }

  .window-content {
    padding: 0 20px 20px 20px;
    height: 100%;
    display: flex;

    .portrait-container {
      display: flex;
      flex-direction: column;

      .portrait-text {
        font-size: 0.6rem;
        line-height: 0.7rem;
        color: var(--secondary-text-color);
      }

      .portrait {
        width: 20vmin;
        height: 20vmin;
        image-rendering: pixelated;
        margin-bottom: 10px;
      }
    }

    .projects-container {
      display: flex;
      flex-direction: column;
      width: 100%;

      .projects-text {
        font-size: 0.6rem;
        color: var(--secondary-text-color);
      }

      .projects-list {
        background-color: var(--background-color);
        margin: 0 20px 0 0;
        padding: 10px;

        .project-item {
          list-style: none;

          .project-link {
            color: var(--primary-text-color);
            text-decoration: none;
            font-size: 0.7rem;
            font-weight: bold;
          }
        }
      }
    }

    .about-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 70vmin;
      overflow-y: scroll;
      margin-left: 20px;
      scrollbar-color: var(--primary-color) #00000000;
      padding-right: 20px;

      .about-text {
        font-size: 0.6rem;
        color: var(--secondary-text-color);
      }

      .terminal {
        background-color: var(--background-color);
        font-size: 0.6rem;
        padding: 10px;
      }
    }

    .links-container {
      overflow-y: scroll;
      scrollbar-color: var(--primary-color) #00000000;
      height: 42vh;
      width: 100%;

      .link-text {
        font-size: 0.6rem;
        color: var(--secondary-text-color);
      }

      .links-list {
        margin: 0 20px 0 0;
        background-color: var(--background-color);
        padding: 10px;

        .link-item {
          list-style: none;

          .link {
            color: var(--primary-text-color);
            text-decoration: none;
            font-size: 0.7rem;
            font-weight: bold;
          }

          .connector-text {
            font-size: 0.6rem;
            color: var(--secondary-text-color);
          }
        }
      }
    }
  }
}

#taskbar {
  width: 100%;
  height: 64px;
  background: var(--taskbar-color);
  z-index: 1;
  position: absolute;
  bottom: 0;
  backdrop-filter: blur(10px);
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;

  #start-button {
    background: none;
    border: none;
    cursor: pointer;
    margin: 0 20px;
    border-radius: 5px;
    padding: 5px;

    &.active {
      background-color: rgba(255, 255, 255, 0.1);
    }

    #start-button-icon {
      filter: brightness(0) saturate(100%) invert(86%) sepia(56%) saturate(7495%) hue-rotate(103deg) brightness(103%) contrast(104%);
      width: 48px;
      height: 48px;
    }
  }

  #start-menu {
    background-color: var(--taskbar-color);
    padding: 40px 10px 10px 10px;
    position: absolute;
    bottom: 70px;
    left: 20px;
    border-radius: 5px;
    display: none;
    flex-direction: column;
    width: 300px;
    &::before {
      position: absolute;
      top: 5px;
      content: "SECOPS DISTRIBUTION v5.2.3";
      font-size: 0.5rem;
      color: var(--secondary-text-color);
      margin-bottom: 10px;
      text-align: left;
    }

    .start-menu-item {
      display: flex;
      align-items: center;
      text-decoration: none;
      padding: 10px;
      background: none;
      border: none;
      cursor: pointer;
      width: fit-content;
      
      .start-menu-icon {
        filter: brightness(0) saturate(100%) invert(86%) sepia(56%) saturate(7495%) hue-rotate(103deg) brightness(103%) contrast(104%);
        width: 24px;
        height: 24px;
      }
      .start-menu-item-text {
        font-family: 'Enter Command', monospace;
        font-size: 0.8rem;
        color: var(--primary-text-color);
        margin-left: 10px;
      }
    }
  }

  #time {
    position: absolute;
    bottom: 20px;
    right: 20px;
    cursor: default;
  }

  #taskbar-container {
    .taskbar-button {
      background: none;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      padding: 5px;
      margin: 0 5px;
      position: relative;

      &.active {
        background-color: rgba(255, 255, 255, 0.1);

        &::after {
          content: "...";
        }
      }

      &::after {
        content: ".";
        position: absolute;
        font-size: 2rem;
        color: var(--primary-text-color);
        bottom: -8px;
        left: 0;
        right: 0;
      }

      .taskbar-button-icon {
        filter: brightness(0) saturate(100%) invert(86%) sepia(56%) saturate(7495%) hue-rotate(103deg) brightness(103%) contrast(104%);
        width: 48px;
        height: 48px;
      }
    }

    #about-task,
    #projects-task,
    #links-task,
    #shrines-task {
      display: none;
    }
  }
}