@use "../../../../../styles" as *;

.item-details {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  background-color: $col-dark;
  overflow: hidden;
  animation: show-animation 500ms ease-out 0s 1 normal both;
  &:has(input[type="checkbox"].back-input:checked) {
    animation: hide-animation 500ms ease-out 0s 1 normal both;
  }
  .buy-section {
    padding: 15px;
    gap: 30px;
    display: flex;
    flex-direction: column;
    .sizes-box {
      h4 {
        margin-bottom: 15px;
      }
      .sizes {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 25px;
        width: 100%;
        height: 40px;
        label {
          text-align: center;
          background: $col-lightBlack;
          padding: 10px 28px;
          border: 2px solid transparent;
          border-radius: 10px;
          transition: 300ms;
          display: flex;
          align-items: center;
          justify-content: center;
          h3 {
            color: $col-gray;
            font-weight: 500;
            transition: 300ms;
          }
          input[type="radio"] {
            display: none;
          }
          &:has(input[type="radio"]:checked) {
            border-color: $col-orange;
            background-color: transparent;
            h3 {
              color: $col-orange;
              font-weight: 600;
            }
          }
        }
      }
    }
    .buy {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
      }
      .add-btn {
        padding: 20px 70px;
        border-radius: 20px;
      }
    }
  }
}
