/*
 * Copyright (C) 2017-2019 Dremio Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "~#oss/uiTheme/less/variables.less";

.title {
  composes: form-label from "~#oss/uiTheme/less/typography.less";
}

.form-body {
  composes: horizontal-content-padding from "~#oss/uiTheme/less/layout.less";
  padding: 16px;
}

.common-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 300;
}

.tab-title {
  composes: common-title;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border--neutral);
}

.tab-sections {
  width: 100%;
}

.section-label {
  composes: common-title;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  color: var(--text--primary);
  margin: 24px 0;
}

.section-body {
  margin-bottom: 8px;
}

.section-title {
  composes: title;
  composes: section-margin from "~#oss/uiTheme/less/layout.less";
}

.input-for-radio {
  margin-left: @input-under-radio-offset;
  //do we need row-margin here????
}

.row-margin {
  margin-top: 0;
}

.stacked-container {
  > *:not(:first-child) {
    .row-margin;
  }
}

.radio-stacked {
  margin-top: 8px !important;
  display: flex !important; //todo remove important, when all components would be switched to css modules
}

.text-input {
  composes: form-default form-placeholder from "~#oss/uiTheme/less/typography.less";
  width: 310px;
  height: 32px;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--border--neutral--solid);

  &::placeholder {
    color: var(--text--placeholder);
  }

  &:hover {
    border: 1px solid var(--border--hover);
  }

  &:focus:hover,
  &:focus {
    border: 1px solid var(--border--focused);
    outline: none;
  }
}

.input-wrapper-advanced {
  width: 500px !important;
}

.number-input-wrapper {
  width: 310px;
  height: 32px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--border--neutral--solid);

  &[type="number"]::-webkit-inner-spin-button,
  &[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }

  &[type="number"] {
    -moz-appearance: textfield;
  }

  &:hover {
    border-color: var(--border--hover);
    .number-input-button-icon {
      display: inline-flex;
    }
  }

  &.--disabled {
    color: var(--text--disabled);
    border-color: var(--border--neutral);
    background-color: var(--fill--disabled);
  }

  &.--error {
    border-color: var(--fill--danger--solid);
  }
}

.number-input-wrapper-focused {
  outline: none;
  border-color: var(--border--focused);

  .number-input-button-icon {
    display: inline-flex !important;
  }

  &:hover {
    border-color: var(--border--hover);
  }
}

.number-input-wrapper-disabled {
  color: var(--text--disabled);
  border-color: var(--border--neutral--solid);
  background-color: var(--fill--disabled);
  cursor: not-allowed;

  &:hover {
    border-color: var(--border--neutral--solid);

    .number-input-button-icon {
      display: none;
    }
  }

  .number-input-button-icon {
    display: none;
  }
}

.number-input-wrapper-error {
  border-color: var(--fill--danger--solid);

  &:hover {
    border-color: var(--fill--danger--solid);
  }
}

.number-input {
  height: auto;
  padding: 0 !important;
  border: none !important;
  color: inherit;
  background-color: inherit;
}

.number-input-disabled {
  cursor: not-allowed;
}

.number-input-buttons {
  width: 20px;
  padding: 3px 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-items: center;

  .number-input-button-icon {
    padding: 0;
    width: 20px;
    height: 14px;
    display: none;
  }
}

.columns-container {
  display: flex;
}

.first-column {
  min-width: 450px;
}

.second-column {
  margin-left: 20px;
}

.row-of-inputs {
  display: flex;
  align-items: center;
}

.fields-horizontal-spacing {
  margin-right: 16px;
}

.row-of-inputs-spacing {
  > *:not(:last-child) {
    .fields-horizontal-spacing;
  }
}

.row-of-radio {
  margin-bottom: 8px;
}

.table-row-element-margin {
  // it is padding for table like view. See
  margin-left: @row-content-margin;
}

// uses this style for table like layout. See multi sort for example
.row-height {
  height: @row-element-height;
}

.table-row {
  composes: row-height row-of-inputs;
}

.table-row-content-padding-left {
  padding-left: @row-content-margin;
}

.view-state-wrapper {
  composes: flex-column-container from "~#oss/uiTheme/less/layout.less";
  overflow: hidden;
}

.source-form-wrapper {
  display: flex;
  height: 100%;
}

.inline-help {
  color: var(--text--faded);
  width: 100%;
}

.element-container {
  margin-bottom: 8px;
  width: 100%;
}
