/////////////////////////////////////
// THEME / COMPONENTS / JQUERY-UI WDN
/////////////////////////////////////


@use "../vendor/jquery-ui";
@use "../variables/" as var;
@use "../mixins/" as mixins;


@layer components {

  /* UNL WDN jQuery UI overrides */
  .ui-widget,
  .ui-widget button,
  .ui-widget input,
  .ui-widget select,
  .ui-widget textarea {
    font-family: inherit;
  }


  // Existing
  .ui-datepicker,
  .ui-datepicker .ui-datepicker-header .ui-state-hover,
  .ui-datepicker .ui-state-default,
  .ui-datepicker .ui-state-active,
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    border: 0;
  }


  .ui-datepicker .ui-corner-all,
  .ui-tabs .ui-tabs-nav {
    border-radius: 0;
  }


  .ui-widget-header,
  .ui-datepicker .ui-datepicker-title,
  .ui-datepicker table,
  .ui-progressbar .ui-progressbar-value {
    margin: 0;
  }


  .ui-datepicker,
  .ui-datepicker td,
  .ui-dialog,
  .ui-tabs,
  .ui-sortable,
  .ui-selectable {
    padding: 0;
  }


  // Widgets
  .ui-widget.ui-widget-content,
  .ui-widget-content,
  .ui-state-default,
  .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default {
    background-color: var(--bg-tabs-panel);
    border-color: var(--b-tabs-panel);
    color: var(--body);
  }


  .ui-button.ui-state-active:hover,
  .ui-button:active,
  .ui-state-active,
  .ui-widget-content .ui-state-active,
  .ui-widget-header .ui-state-active,
  a.ui-button:active {
    border: 1px solid #9e0900;
    background-color: #d00000;
  }


  // Dialog
  .ui-dialog {
    box-shadow: var.$box-shadow-datepicker-dialog;
  }


  .ui-dialog .ui-dialog-titlebar {
    background-color: var(--bg-tabs-panel);
    border: 0;
  }


  .ui-dialog-title {
    color: var(--heading);
  }


  // Links
  .ui-state-default a,
  .ui-state-default a:link {
    color: var(--link);
  }


  .ui-state-default a:visited {
    color: var(--visited);
  }


  // Forms, labels and inputs
  .ui-widget label {
    @include mixins.txt-sm;
  }


  .ui-widget input,
  .ui-widget textarea {
    background-color: var(--bg-input);
    border: 1px solid var(--b-input);
    border-radius: 3px;
    padding: var.$padding-top-input var.$padding-right-input var.$padding-bottom-input var.$padding-left-input;
  }


  .ui-widget input:not([type="submit"]):disabled,
  .ui-widget textarea:disabled {
    background-color: var(--bg-input-disabled);
  }


  .ui-widget input:not([type="submit"]):hover,
  .ui-widget textarea:hover {
    transition: border-color var.$transition-duration-hover-on var.$transition-timing-fn-hover-on;
  }


  .ui-widget input:not([type="submit"]):focus,
  .ui-widget textarea:focus {
    border-color: var(--b-input-focus);
    box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--b-input-focus);
    outline: none;
    transition: box-shadow var.$transition-duration-hover-on var.$transition-timing-fn-hover-on;
  }


  // Datepicker
  .ui-datepicker .ui-datepicker-header {
    padding: 1.069em 1em 1em;
  }


  .ui-datepicker .ui-datepicker-header .ui-state-hover {
    background: none;
  }


  .ui-datepicker .ui-datepicker-header .ui-state-hover .ui-icon {
    background-image: url('@images/jquery-ui/ui-icons_ffffff_256x240.png');
  }


  .ui-datepicker .ui-state-active {
    @include mixins.bg-darker;
  }


  .ui-datepicker .ui-state-disabled {
    @include mixins.bg-lightest;
    opacity: 1;
  }


  .ui-datepicker .ui-state-highlight {
    @include mixins.bg-scarlet;
    color: var.$cream;
  }


  .ui-datepicker .ui-datepicker-title {
    line-height: 1;
  }


  .ui-datepicker .ui-datepicker-next {
    float: right;
  }


  .ui-datepicker .ui-datepicker-prev {
    float: left;
  }


  .ui-datepicker .ui-datepicker-next,
  .ui-datepicker .ui-datepicker-prev {
    cursor: pointer;
    height: auto;
    margin: -0.16em 0;
    position: static;
  }


  .ui-datepicker .ui-datepicker-next span,
  .ui-datepicker .ui-datepicker-prev span {
    margin: auto;
    position: static;
  }


  .ui-datepicker table th {
    @include mixins.bg-lightest;
    border: 1px solid var.$gray;
    @include mixins.txt-sm;
    font-weight: 400;
    padding: 12px 1px;
    text-transform: uppercase;
    width: 14%;
  }


  .ui-datepicker tbody tr {
    background-color: transparent;
  }


  .ui-datepicker td {
    @include mixins.bg-white;
    border: 1px solid var.$light-gray;
    @include mixins.txt-xs;
  }


  .ui-datepicker td .ui-state-hover {
    outline: 2px solid var.$scarlet;
  }


  .ui-datepicker td a,
  .ui-datepicker td span {
    text-align: center;
    padding: 0.66em 1px;
  }


  .ui-icon {
    display: inline-block;
  }


  .ui-selecting {
    @include mixins.bg-lightest;
  }


  .ui-selected {
    @include mixins.bg-scarlet;
    color: var.$cream;
  }


  [class*="ui-corner-"] {
    border-radius: 0 !important;
  }


  // Buttons
  .ui-button,
  button.ui-state-default {
    background-color: var(--bg-btn-primary);
    @include mixins.txt-sm;
    padding: var.$length-em-3 var.$length-em-4;
  }


  .ui-button,
  button.ui-button,
  input[type=button].ui-button,
  input[type=submit].ui-button {
    @include mixins.txt-sm;
    @include mixins.lh-4;
  }


  .ui-button,
  .ui-button:focus,
  .ui-button:hover,
  .ui-button:active,
  button.ui-state-default,
  a.ui-button,
  a:link.ui-button,
  a:visited.ui-button {
    border: 2px solid var(--b-btn-primary);
    border-radius: var.$roundrect;
    color: var(--btn-primary);
    @include mixins.bold;
  }


  .ui-button.ui-button-icon-only {
    background-color: transparent;
    border-color: transparent;
  }


  // Hover & Active
  .ui-button:not(:disabled):hover,
  .ui-button:not(:disabled):active,
  button.ui-state-default:not(:disabled):hover,
  button.ui-state-default:not(:disabled):active {
    background-color: var(--bg-btn-primary-hover);
    border-color: var(--b-btn-primary-hover);
  }


  .ui-button.ui-button-icon-only:hover {
    background-color: var(--bg-btn-secondary-tertiary-hover);
    border-color: transparent;
  }


  // Focus
  .ui-button:focus,
  button.ui-state-default:focus {
    box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--b-input-focus);
    transition: box-shadow var.$transition-duration-hover-on var.$transition-timing-fn-hover-on;
  }


  // Active
  .ui-button:active,
  button.ui-state-default:active {
    box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--b-btn-primary-hover);
  }


  // Progress Bar
  .ui-progressbar .ui-progressbar-value {
    background-color: var.$cerulean;
  }

}
