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

.sizes-stock {
  & > *:last-child {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 3rem;
    row-gap: 1.5rem;
  }

  .sizes :last-child {
    display: flex;
    gap: 2rem;

    & > * {
      padding: 0;
      text-transform: uppercase;
      font-size: 1.25rem;
      width: 2rem;
      height: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 2px 2px 4px $color-neutral-1000;
      position: relative;
      cursor: pointer;

      &.disable {
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 1px;
          background-color: $color-accent-000;
          transform: rotate(45deg);
        }
        &::before {
          content: "";
          position: absolute;
          width: 100%;
          height: 1px;
          background-color: $color-accent-000;
          transform: rotate(-45deg);
        }
      }
      &.active {
        border: 1px solid $color-primary-000;
      }
    }
  }

  .stock {
    font-size: 1rem;
  }
}
