@use 'styles/mixins' as *;

@mixin lighthouse-input-size-hack {
  // Hack for this Lighthouse warning:
  // > Interactive elements like buttons and links should be large enough (48x48px), and have
  // > enough space around them, to be easy enough to tap without overlapping onto other elements.

  input {
    position: absolute;
    top: -200%;
    right: -100%;
    left: -100%;
    bottom: 0;
    width: 300%;
    height: 300%;
    clip-path: polygon(
      calc(100% / 3) calc(200% / 3),
      calc(200% / 3) calc(200% / 3),
      calc(200% / 3) 100%,
      calc(100% / 3) 100%
    );
  }

  [dir='ltr'] & {
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      input {
        left: 0;
        clip-path: polygon(0 calc(200% / 3), calc(100% / 3) calc(200% / 3), calc(100% / 3) 100%, 0 100%);
      }
    }

    &:nth-last-child(1),
    &:nth-last-child(2),
    &:nth-last-child(3) {
      input {
        left: -200%;
        clip-path: polygon(calc(200% / 3) calc(200% / 3), 100% calc(200% / 3), 100% 100%, calc(200% / 3) 100%);
      }
    }
  }

  [dir='rtl'] & {
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      input {
        left: -200%;
        right: 0;
        clip-path: polygon(calc(200% / 3) calc(200% / 3), 100% calc(200% / 3), 100% 100%, calc(200% / 3) 100%);
      }
    }

    &:nth-last-child(1),
    &:nth-last-child(2),
    &:nth-last-child(3) {
      input {
        left: 0;
        right: -200%;
        clip-path: polygon(0 calc(200% / 3), calc(100% / 3) calc(200% / 3), calc(100% / 3) 100%, 0 100%);
      }
    }
  }
}

.rack {
  position: relative;
  display: flex;
  box-shadow: var(--box-shadow);
  border-radius: var(--border--radius);
  transition: var(--transition);
  opacity: 1;
}

.tile {
  @include lighthouse-input-size-hack;
}

.hidden {
  opacity: 0;
}

.sharpLeft {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.sharpRight {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}