@import "../_mixins.less";

:host {
  --input-min-height: calc(var(--line-height-computed) + 2*var(--padding-vertical) + 2px);
  --focus-border-color: var(--input-focus-border-color);
  --focus-halo-color: var(--input-focus-halo-color);
}

.bk-input {
  position: relative;
  display: inline-block;
  width: 100%;
  flex-grow: 1;
  min-height: var(--input-min-height);
  padding: 0 var(--padding-horizontal);
  background-color: var(--background-color);
  border: var(--border);
  border-radius: var(--border-radius);
  resize: none;

  &:focus {
    border-color: var(--focus-border-color);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--focus-halo-color);
  }

  .placeholder(var(--placeholder-color));

  &[disabled], &.bk-disabled {
    cursor: not-allowed;
    background-color: var(--disabled-background-color);
    opacity: 1;
  }
}

.bk-input-container {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  .bk-input-prefix, .bk-input-suffix {
    display: flex;
    align-items: center;
    flex: 0 1 0;
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 0 var(--padding-horizontal);
    background-color: var(--surface-background-color);
  }

  .bk-input-prefix {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .bk-input-suffix {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .bk-input {
    flex: 1 0 0;
  }

  .bk-input:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .bk-input:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

input[type=file].bk-input {
  // align the button with input's edge
  padding-left: 0;
}
input[type=file]::file-selector-button {
  // needed to override user-agent's defaults
  // button styling is done in buttons.less
  box-sizing: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

select:not([multiple]), select:not([size]) {
  &.bk-input {
    height: auto;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" viewBox="0 0 25 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 25,0 12.5,20 Z" fill="black" /></svg>');
    background-position: right 0.5em center;
    background-size: 8px 6px;
    background-repeat: no-repeat;
    padding-right: calc(var(--padding-horizontal) + 8px);
  }
}

option {
  padding: 0;
}

select[multiple], select[size], textarea {
  &.bk-input {
    height: auto;
  }
}

.bk-input-group {
  position: relative;
  width: 100%;
  height: 100%;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: start;
  flex-direction: column;

  white-space: nowrap;

  &.bk-inline {
    flex-direction: row;

    & > *:not(:first-child) {
      margin-left: 5px;
    }
  }

  >.bk-spin-wrapper {
    display: inherit;
    width: inherit;
    height: inherit;
    position: relative;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;

    input {
      padding-right: 20px;
    }

    >.bk-spin-btn {
      position: absolute;
      display: block;
      height: 50%;
      min-height: 0;
      min-width: 0;
      width: 30px;
      padding: 0;
      margin: 0;
      right: 0;
      border: none;
      background: none;
      cursor: pointer;

      &:before {
        content: "";
        display: inline-block;
        transform: translateY(-50%);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
      }

      &.bk-spin-btn-up {
        top: 0;

        &:before {
          border-bottom: 5px solid var(--color);
        }
        &:disabled:before {
          border-bottom-color: var(--disabled-color);
        }
      }

      &.bk-spin-btn-down {
        bottom: 0;

        &:before {
          border-top: 5px solid var(--color);
        }

        &:disabled:before {
          border-top-color: var(--disabled-color);
        }
      }
    }
  }
}

.bk-description {
  position: relative;
  display: inline-block;
  margin-left: 0.25em;
  vertical-align: middle;
  margin-top: -2px; // arbitrary, looks better
  cursor: pointer;

  &> .bk-icon {
    width: 18px;
    height: 18px;
    .icon-mask(var(--bokeh-icon-help), var(--color));
  }
}

label:hover > .bk-description > .bk-icon, .bk-icon.bk-opaque {
  opacity: 1.0;
}
