@import 'styles/mixins';

@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((100% / 3) (200% / 3), (200% / 3) (200% / 3), (200% / 3) 100%, (100% / 3) 100%);
  }

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

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

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

    &:nth-last-child(1),
    &:nth-last-child(2),
    &:nth-last-child(3) {
      input {
        left: 0;
        right: -200%;
        clip-path: polygon(0 (200% / 3), (100% / 3) (200% / 3), (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;
}