@import "../Styles/styles.scss";

CustomizationLayout {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: all;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), transparent 55%);

  &.show {
    opacity: 1;
  }
}

.left-panel {
  position: relative;
  flex-direction: column;
  height: 100%;
  margin-left: 171px;

  .header {
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
  }

  .category-header {
    height: 154px;
    align-items: center;
    gap: 8px;
  }

  .body {
    width: 760px;
    margin: 60px 40px 25px 40px;
    gap: 8px;

    flex-direction: column;
  }

  .cosmetic-details {
    flex-shrink: 0;
    margin: auto 0 0 53px;
    width: 733px;
    height: 310px;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;

    &.show {
      display: flex;
    }

    .header {
      height: 130px;
      width: 100%;
      border-left-width: 23px;

      > img {
        width: 145px;
        height: 145px;
        background-size: contain;
        background-repeat: no-repeat;
      }

      .info {
        flex-direction: column;
        font-family: Changa One;

        .name {
          font-size: 44px;
          font-weight: bold;
        }

        .rarity {
          color: white;
          font-size: 22px;
        }
      }
    }

    .title-header {
      background-image: linear-gradient(to right, rgba(225, 225, 225, 0.22), #000000AA);
      border-left-color: #e1e1e1;

      .title-icon {
        width: 145px;
        height: 145px;
        align-items: center;
        justify-content: center;

        > i {
          font-size: 76px;
          color: #e1e1e1;
          text-stroke: 8px black;
        }
      }

      .info .name {
        color: #e1e1e1;
      }
    }

    .description {
      flex-direction: column;
      padding: 25px 50px;
      color: white;
      font-size: 24px;
      height: 100%;
      align-items: flex-start;

      .date-unlocked {
        margin-top: auto;
      }
    }

    //.color-selector-header {
    //    height: 65px;
    //    width: 100%;
    //    font-family: Changa One;
    //    background-image: linear-gradient(to right, black, rgba(0, 0, 0, 0.6));
    //    color: #e1e1e1;
    //    font-size: 40px;
    //    align-items: center;
    //    padding: 20px;
    //
    //    .buttons {
    //        margin-left: auto;
    //        gap: 8px;
    //
    //        > button {
    //            color: #e1e1e1;
    //            background-color: black;
    //            border-radius: 2px;
    //            align-items: center;
    //            justify-content: center;
    //            padding: 4px 8px 0 16px;
    //            font-size: 32px;
    //            height: 40px;
    //            gap: 4px;
    //            background-color: #e1e1e1;
    //            color: black;
    //
    //            &:hover {
    //                transform: scale(1.03);
    //            }
    //
    //            > i {
    //                margin-bottom: 2px;
    //            }
    //
    //            > label {
    //                font-size: 24px;
    //                font-family: $font-primary;
    //                font-weight: bold;
    //            }
    //
    //            &:last-child {
    //                background-color: transparent;
    //                border: 1px solid #e1e1e1;
    //                color: #e1e1e1;
    //            }
    //        }
    //    }
    //}
    //
    //.color-selector {
    //    margin-top: 8px;
    //}
  }
}

.control-bar {
  position: absolute;
  bottom: 80px;
  width: 200px;
  right: 520px;
  flex-direction: column;
  gap: 21px;
  align-items: center;
  justify-content: center;
  font-family: Changa One;

  .equip-preview-text {
    font-size: 24px;
    color: white;
    gap: 4px;
  }

  .control-buttons {
    gap: 8px;
  }

  .equip-button {
    height: 62px;
    width: 226px;
    background-color: #e1e1e1;
    color: black;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border-radius: 2px;
    transition: all 0.2s;
    pointer-events: all;

    &:hover:not(.disabled) {
      transform: scale(1.03);
    }

    &.unequip {
      background-color: rgba(0, 0, 0, 0.8);
      color: #e1e1e1;
    }

    &.disabled {
      background-color: #a1a1a1;
      color: #2a2a2a;
    }
  }

  .toggle-color-selector {
    height: 62px;
    width: 62px;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    border-radius: 2px;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;

    &:hover {
      transform: scale(1.03);
    }

    > i {
      font-size: 40px;
      color: #e1e1e1;
    }

    &.selected {
      border: 2px #e1e1e1;
    }
  }

  .color-selector {
    pointer-events: all;
  }
}

.bottom-bar {
  position: absolute;
  bottom: 0;
  height: 80px;
  width: 100%;
  padding: 0 24px;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  opacity: 0;

  .input-hint {
    position: relative;
    gap: 4px;
    align-items: center;

    > label {
      color: rgba(255, 255, 255, 0.9);
      font-size: 20px;
    }
  }
}

inputglyph {
  margin-top: 2px;
  background-size: contain;
  width: 40px;
  height: 40px;

  &.pressed {
    transform: scale(0.85);
    opacity: 0.8;
  }

  &:hover {
    transform: scale(1.05);
  }
}