//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use "../../config" as *;
@use "../../motion" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/high-contrast-mode" as *;

$input-height: 40px !default;
$content-switcher-border-radius: 6px !default;
$content-switcher-option-border: 2px solid $action-default-fill-primary-default !default;

@mixin content-switcher {
  .#{$prefix}--content-switcher {
    @include font-family("sans");
    display: flex;
    height: $input-height;
  }

  .#{$prefix}--content-switcher--sm {
    height: calcRem(24px);
    .#{$prefix}--content-switcher-btn {
      padding: 0 $spacing-04 0 $spacing-04;
      @include type-style("label");
    }
  }

  .#{$prefix}--content-switcher-btn {
    @include reset;
    @include type-style("body-short");
    @include font-family("sans");
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 0 $spacing-07;
    margin: 0;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid $action-default-fill-primary-default;
    color: $action-default-fill-primary-default;

    &:focus {
      outline: 1px solid transparent;
      // box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
      //background-color: $hover-primary;
      z-index: 2;
      //border-color: $hover-primary;
      text-decoration: none;
      //color: var(--inverse-01);
    }

    &:hover {
      cursor: pointer;
    }

    &:hover,
    &:active {
      //background-color: $hover-primary;
      //border-color: $hover-primary;
      //color: var(--inverse-01);
    }
  }

  .#{$prefix}--content-switcher__icon {
    margin-right: $spacing-03;
    fill: currentColor;
    // need to color any child path or g
    * {
      fill: currentColor;
    }
  }

  .#{$prefix}--content-switcher-btn:not(:last-of-type) {
    border-right: none;
  }

  .#{$prefix}--content-switcher-btn:not(:first-of-type) {
    border-left: $content-switcher-option-border;

    &:hover {
      //border-left-color: $hover-primary;
    }
  }

  .#{$prefix}--content-switcher-btn:first-of-type {
    border-bottom-left-radius: $content-switcher-border-radius;
    border-top-left-radius: $content-switcher-border-radius;

    &:hover {
      //border-color: $hover-primary;
    }

    &:focus {
      // box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
      z-index: 0;
    }
  }

  .#{$prefix}--content-switcher-btn:last-of-type {
    border-top-right-radius: $content-switcher-border-radius;
    border-bottom-right-radius: $content-switcher-border-radius;

    &:hover {
      //border-color: $hover-primary;
    }

    &:focus {
      // box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
      z-index: 0;
    }
  }

  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected {
    background-color: $action-default-fill-primary-default;
    color: $text-inverse-default;
    outline: 1px solid transparent;

    &:hover,
    &:focus {
      //border-color: $hover-primary;
      //background-color: $hover-primary;
    }
  }
}