/*
 * 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.
 */

.base {
  cursor: pointer; // todo: use css to make all <label>s cursor:pointer?
  display: inline-flex;
  position: relative;
  align-items: center; // This looks off in FF<=50 (DX-8124) - but resolving messes up the latest versions of browsers
  margin-top: 6px;

  :global(.checked) {
    border: 1px solid var(--fill--toggle--checked);
    background-color: var(--fill--toggle--checked);
    color: var(--fill--primary);
    &:hover {
      background-color: var(--fill--toggle--checked--hover);
      border: 1px solid var(--fill--toggle--checked--hover);
    }
  }

  &:focus-within:has(> input[type="checkbox"]:focus-visible) {
    :global(.checked) {
      outline-offset: 4px;
      outline: 1.5px solid var(--border--focused);
    }
    .customCheckBox {
      outline-offset: 4px;
      outline: 1.5px solid var(--border--focused);
    }
  }
  &:focus-within:has(> input[type="radio"]:focus-visible) {
    :global(.radio) {
      outline-offset: 4px;
      outline: 1.5px solid var(--border--focused);
    }
  }
}

.disabled {
  composes: unavailable disabled from "~#oss/uiTheme/less/typography.less";
  cursor: default;

  :global(.checked) {
    border: none;
    background-color: var(--fill--disabled);
    color: var(--text--disabled);
    &:hover {
      border-color: var(--border--neutral--solid);
    }
  }
}

.label-content {
  align-items: center;
  line-height: 20px;
  display: flex;
  //padding-top: 4px;
  min-width: 0; // flex gives children min width auto. Override so parent label can control size.
}

.customCheckBox {
  @size: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 10px;
  width: @size;
  height: @size;
  line-height: 16px;
  margin: 0 8px 0 0;
  vertical-align: text-bottom;
  border-radius: 2px;
  background-color: var(--fill--primary);
  border: 1px solid var(--border--neutral--solid);
  &:hover {
    border: 1px solid var(--border--hover);
  }
}

.checkbox-standalone {
  .customCheckBox {
    margin-top: -1px;
    align-self: baseline;
  }

  .label-content {
    line-height: 1.1;
  }
}

.onoff-btn {
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 18px;
  width: 48px;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

.onoff-dot {
  border-radius: 100%;
  position: absolute;
  top: 7px;
  height: 10px;
  width: 10px;
}
