@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "forms/input-file") {
  /**
   * Input type file
   */

  // 1. Hack to display the outline on the focused file selector button
  //    with the forced overflow hidden on the input[type="file"] element.
  input[type="file"] {
    #{$✨}color: var(#{$✨}muted-color);
    margin-left: calc(var(#{$✨}outline-width) * -1); // 1
    padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5) 0;
    padding-left: var(#{$✨}outline-width); // 1
    border: 0;
    border-radius: 0;
    background: none;

    &::file-selector-button {
      margin-right: calc(var(#{$✨}spacing) / 2);
      padding: calc(var(#{$✨}form-element-spacing-vertical) * 0.5)
        var(#{$✨}form-element-spacing-horizontal);
    }

    &:is(:hover, :active, :focus) {
      &::file-selector-button {
        #{$✨}background-color: var(#{$✨}secondary-background-hover);
        #{$✨}border-color: var(#{$✨}secondary-border-hover);
      }
    }

    &:focus {
      &::file-selector-button {
        #{$✨}box-shadow: var(#{$✨}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
          0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
      }
    }
  }
}