@import 'styles/mixins';

.tile {
  --background-color: transparent;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: var(--background-color);
  border-radius: var(--border--radius);
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  user-select: none;

  @include media('<xs') {
    --border--radius: 3px;
  }

  &.points1 {
    --background-color: var(--color--yellow);
  }

  &.points2 {
    --background-color: var(--color--green);
  }

  &.points3,
  &.points4 {
    --background-color: var(--color--blue);
  }

  &.points5 {
    --background-color: var(--color--red);
  }

  &.raised {
    box-shadow: var(--box-shadow--raised);

    @include media('<xs') {
      box-shadow: var(--box-shadow--raised--subtle);
    }
  }

  &.blank {
    --background-color: var(--color--white);

    color: var(--color--foreground);
  }

  &.empty {
    color: var(--color--inactive);
  }

  &.invalid {
    --background-color: var(--color--foreground);
    --shadow--color: var(--box-shadow--color--inverse);

    color: var(--color--white);
  }

  &.highlighted {
    --background-color: var(--color--primary);

    color: var(--color--primary--opposite);

    .points {
      color: inherit;
    }
  }
}

.input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px; // prevent iOS from automatically zooming in on focus
  outline: none;

  &::selection {
    --background--color: transparent;
  }
}

.points {
  @include text-stroke(var(--background-color), 1px);

  position: absolute;
  inset-block-end: 1%;
  inset-inline-end: 9%;
  font-weight: bold;
  user-select: none;
  pointer-events: none;
  letter-spacing: -1px;

  @include media('<xs') {
    display: none;
  }
}

.alert {
  --size: 30%;

  position: absolute;
  width: var(--size);
  height: var(--size);
  inset-block-start: 0;
  inset-inline-end: 0;
  border-start-end-radius: inherit;
  background: radial-gradient(
    var(--color--error--opposite),
    var(--color--error--opposite) 85%,
    transparent 85%,
    transparent
  );
  color: var(--color--error);
  pointer-events: none;
}