@use '../../styles/tools';
@use './variables' as *;

@include tools.layer('components') {
  .v-hotkey {
    align-items: center;
    display: inline-flex;
    gap: $hotkey-gap;
    vertical-align: middle;
    line-height: $hotkey-line-height;

    &--disabled {
      opacity: $hotkey-disabled-opacity;
    }

    &--inline {
      align-items: baseline;
      max-height: 1lh;
      vertical-align: baseline;
      font-size: $hotkey-inline-font-size;
      line-height: $hotkey-inline-line-height;
    }

    &__prefix {
      opacity: $hotkey-prefix-suffix-opacity;
      font-weight: $hotkey-prefix-suffix-font-weight;
      vertical-align: baseline;
    }

    &__suffix {
      opacity: $hotkey-prefix-suffix-opacity;
      font-weight: $hotkey-prefix-suffix-font-weight;
      vertical-align: baseline;
    }

    // Contained variant
    &--contained {
      .v-hotkey__contained-wrapper {
        display: inline-flex;
        align-items: center;
        gap: $hotkey-combination-gap;
        padding: $hotkey-contained-padding;
        box-sizing: border-box;
        background: unset;
        box-shadow: unset;
        min-height: 1em;
        font-size: $hotkey-font-size;
        line-height: $hotkey-line-height;
        .v-hotkey__prefix, .v-hotkey__suffix {
          opacity: $hotkey-prefix-suffix-contained-opacity;
        }
        .v-hotkey__prefix {
          margin-right: $hotkey-contained-prefix-margin-right;
        }
        .v-hotkey__suffix {
          margin-left: $hotkey-contained-suffix-margin-left;
        }
      }

      .v-hotkey__divider {
        opacity: $hotkey-divider-opacity;
        font-size: inherit;
      }

      .v-hotkey__combination {
        display: inline-flex;
        align-items: center;
        gap: $hotkey-combination-gap;
      }

      &.v-hotkey--inline .v-hotkey__contained-wrapper.v-kbd {
        align-self: baseline;
        align-items: baseline;
        font-size: $hotkey-inline-font-size;
        line-height: $hotkey-inline-line-height;
        padding: $hotkey-inline-padding;
        gap: $hotkey-combination-gap;
        margin-left: 0;
        margin-right: 0;
      }

      &.v-hotkey--inline .v-hotkey__divider {
        font-size: $hotkey-inline-divider-font-size;
        align-self: baseline;
      }

      &.v-hotkey--inline .v-hotkey__combination {
        gap: $hotkey-combination-gap;
        align-items: baseline;
      }
    }

    &__key {
      &.v-kbd {
        min-height: unset;
        font-size: $hotkey-font-size;
        line-height: $hotkey-line-height;
        padding: $hotkey-padding;
        min-width: $hotkey-min-width;
        @include tools.variant($hotkey-variants...);
      }

      &-symbol.v-kbd {
        line-height: normal;
        font-size: 1em;
      }

      &-icon .v-icon {
        max-width: $hotkey-icon-max-width;
        min-width: unset;
      }

      &--nested {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        font: inherit;
        color: inherit;
        display: inline-flex;
        align-items: center;
        min-width: auto;
        min-height: auto;
        align-self: baseline;

        &.v-hotkey__key-icon {
          align-self: center;
        }

        .v-icon {
          max-width: $hotkey-icon-max-width;
          min-width: unset;
        }
      }
    }

    &__divider {
      align-items: center;
      display: inline-flex;
      opacity: $hotkey-divider-opacity;
      font-size: $hotkey-divider-font-size;
    }

    &__combination {
      align-self: baseline;
      display: flex;
      gap: $hotkey-combination-gap;
    }



    &--inline &__key {
      &-symbol.v-kbd,
      &-text.v-kbd {
        align-self: baseline;
      }

      &.v-kbd {
        font-size: $hotkey-inline-font-size;
        line-height: $hotkey-inline-line-height;
        padding: $hotkey-inline-padding;
        min-width: $hotkey-inline-min-width;
      }

      &-icon {
        align-self: stretch;

        &.v-kbd {
          padding-top: 0;
          padding-bottom: 0;
        }

        .v-icon {
          width: min-content;
          min-width: fit-content;
          max-height: $hotkey-inline-icon-max-height;

          .v-icon__svg {
            height: 100%;
            width: unset;
          }
        }
      }
    }

    &--inline &__combination {
      height: inherit;
      align-self: baseline;
      display: flex;
      gap: 1px;
    }

    &--inline &__divider {
      font-size: $hotkey-inline-divider-font-size;
    }

    &--inline &__prefix,
    &--inline &__suffix {
      align-self: baseline;
      font-size: inherit;
    }

    &--variant-elevated &__key.v-kbd {
      @include tools.elevation($hotkey-elevation);
    }

    &--variant-flat &__key.v-kbd {
      box-shadow: none;
    }

    &--variant-outlined &__key.v-kbd {
      @include tools.elevation(0);
      & {
        background: none;
      }
    }

    &--variant-text {
      .v-hotkey__key.v-kbd {
        @include tools.elevation(0);
        & {
          background: transparent !important;
          border: none !important;
          padding-left: 0;
          padding-right: 0;
          min-width: auto;
        }
      }

      .v-hotkey__combination {
        gap: 1px;
      }
    }

    &--variant-tonal &__key.v-kbd {
      border: unset;
      box-shadow: unset;
    }
  }

  // Screen reader only content
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}