@use "src/styles";
@use "src/colors";

.desktop {
  width: 100vw;
  height: 100vh;

  background-image: url(styles.$background);

  display: flex;
  flex-direction: column;

  .windows {
    width: 100%;
    flex-grow: 1;
    position: relative;
  }

  .taskbar {
    width: 100%;
    height: 50px;
    background-color: rgba(colors.$medium, 0.6);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    z-index: 100;

    display: flex;
    padding: 5px;

    .icons {
      margin-right: auto;
      display: flex;
      gap: 10px;

      & > * {
        padding: 5px;
        border-radius: 5px;
        transition: background-color 200ms;

        &:hover, &.focus {
          background-color: rgba(colors.$light, 0.3);
        }
      }
    }

    .right {
      display: flex;
      gap: 10px;
      margin-left: auto;

      img {
        width: 20px;
        height: 20px;
        align-self: center;

        &:hover {
          cursor: pointer;
        }
      }

      .lang {
        align-self: center;
        font-size: 11px;
        user-select: none;
      }

      .datetime {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-right: 10px;
        border-radius: 5px;
        padding-inline: 5px;
        transition: background-color 200ms;

        span {
          text-align: right;
          user-select: none;
          font-size: 12px;
        }

        &:hover, &.focus {
          background-color: rgba(colors.$light, 0.3);
        }
      }
    }
  }
}
