@import "../../base";

@import "../error-message/index";
@import "../hint/index";
@import "../label/index";

@include govuk-exports("govuk/component/file-upload") {
  $file-upload-border-width: 2px;
  $component-padding: govuk-spacing(1);
  $empty-button-background-colour: govuk-colour("white");
  $empty-pseudo-button-background-colour: govuk-colour("black", $variant: "tint-95");
  $empty-status-background-colour: govuk-colour("blue", $variant: "tint-80");

  .govuk-file-upload {
    @include govuk-font($size: 19);

    max-width: 100%;
    margin-left: -$component-padding;
    padding: $component-padding;
    color: govuk-functional-colour(text);

    // The default file upload button in Safari does not support setting a
    // custom font-size. Set `-webkit-appearance` to `button` to drop out of the
    // native appearance so the font-size is set to 19px
    // https://webkit.org/b/224746
    &::-webkit-file-upload-button {
      -webkit-appearance: button;
      color: inherit;
      font: inherit;
    }

    &:focus {
      outline: $govuk-focus-width solid;
      outline-color: govuk-functional-colour(focus);
      // Use `box-shadow` to add border instead of changing `border-width`
      // (which changes element size) and since `outline` is already used for
      // the yellow focus state.
      box-shadow: inset 0 0 0 4px govuk-functional-colour(input-border);
    }

    // Set "focus-within" to fix https://bugzil.la/1430196 so that component
    // receives focus in Firefox.
    // This can't be set together with `:focus` as all versions of IE fail
    // to recognise `focus-within` and don't set any styles from the block
    // when it's a selector.
    &:focus-within {
      outline: $govuk-focus-width solid;
      outline-color: govuk-functional-colour(focus);

      box-shadow: inset 0 0 0 4px govuk-functional-colour(input-border);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .govuk-drop-zone {
    display: block;
    position: relative;
    z-index: 0;
    background-color: govuk-functional-colour(body-background);
  }

  // required because disabling pointer events
  // on the button means that the cursor style
  // be applied on the button itself
  .govuk-drop-zone--disabled {
    cursor: not-allowed;
  }

  .govuk-file-upload-button__pseudo-button {
    width: auto;
    margin-right: govuk-spacing(2);
    margin-bottom: $govuk-border-width-form-element + 1;
    flex-shrink: 0;
  }

  .govuk-file-upload-button__instruction {
    margin-top: govuk-spacing(2) - ($govuk-border-width-form-element + 1);
    margin-bottom: 0;
    text-align: left;
  }

  .govuk-file-upload-button__status {
    display: block;
    margin-bottom: govuk-spacing(2);
    padding: govuk-spacing(3) govuk-spacing(2);
    color: govuk-colour("white");
    background-color: govuk-colour("blue");
    text-align: left;
    @include govuk-text-break-word;
  }

  // bugs documented with button using flex
  // https://github.com/philipwalton/flexbugs#flexbug-9
  // so we need a container here
  .govuk-file-upload-button__pseudo-button-container {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
  }

  .govuk-file-upload-button {
    width: 100%;
    // align the padding to be same as notification banner and error summary accounting for the thicker borders
    padding: (govuk-spacing(3) + $govuk-border-width - $file-upload-border-width);
    border: $file-upload-border-width govuk-colour("black", $variant: "tint-80") solid;
    background-color: govuk-colour("white");
    cursor: pointer;

    @media #{govuk-from-breakpoint(tablet)} {
      padding: (govuk-spacing(4) + $govuk-border-width - $file-upload-border-width);
    }

    .govuk-file-upload-button__pseudo-button {
      background-color: govuk-colour("black", $variant: "tint-95");
    }

    &:hover {
      border-color: govuk-colour("black", $variant: "tint-50");

      .govuk-file-upload-button__pseudo-button {
        background-color: govuk-colour("black", $variant: "tint-80");
      }

      .govuk-file-upload-button__status {
        background-color: govuk-colour("blue");
      }
    }

    &:active,
    &:focus {
      border: $file-upload-border-width solid govuk-colour("black");
      outline: $govuk-focus-width solid;
      outline-color: govuk-functional-colour(focus);
      // Ensure outline appears outside of the element
      outline-offset: 0;
      background-color: govuk-colour("black", $variant: "tint-95");
      // Double the border by adding its width again. Use `box-shadow` for this
      // instead of changing `border-width` - this is for consistency with
      // components such as textarea where we avoid changing `border-width` as
      // it will change the element size. Also, `outline` cannot be utilised
      // here as it is already used for the yellow focus state.
      box-shadow: inset 0 0 0 $govuk-border-width-form-element;

      .govuk-file-upload-button__pseudo-button {
        background-color: govuk-functional-colour(focus);
        box-shadow: 0 2px 0 govuk-colour("black");
      }

      &:hover .govuk-file-upload-button__pseudo-button {
        border-color: govuk-functional-colour(focus);
        outline: 3px solid transparent;
        background-color: govuk-colour("black", $variant: "tint-80");
        box-shadow: inset 0 0 0 1px govuk-functional-colour(focus);
      }
    }
  }

  .govuk-file-upload-button--empty {
    border-style: dashed;
    background-color: $empty-button-background-colour;

    .govuk-file-upload-button__pseudo-button {
      background-color: $empty-pseudo-button-background-colour;
    }

    .govuk-file-upload-button__status {
      color: govuk-colour("black");
      background-color: $empty-status-background-colour;
    }

    &:hover,
    &:focus,
    &:active {
      background-color: govuk-colour("black", $variant: "tint-95");

      .govuk-file-upload-button__status {
        background-color: govuk-colour("blue", $variant: "tint-80");
      }
    }
  }

  .govuk-file-upload-button--dragging {
    border-style: solid;
    border-color: govuk-colour("black");

    // extra specificity to apply when
    // empty
    &.govuk-file-upload-button--empty {
      background-color: govuk-colour("black", $variant: "tint-95");
    }
  }

  .govuk-file-upload-button:disabled {
    pointer-events: none;
    opacity: 0.5;

    background-color: $empty-button-background-colour;

    .govuk-file-upload-button__pseudo-button {
      background-color: $empty-pseudo-button-background-colour;
    }

    .govuk-file-upload-button__status {
      background-color: $empty-status-background-colour;
    }
  }
}

/*# sourceMappingURL=_index.scss.map */