@use "sass:color";
@use "../../colors" as *;
@use "../../button/colors" as *;

// adduse

$material-tabs-nav-button-background: color.change($button-default-hover-bg, $alpha: 0.08) !default;

/**
* $name 10. Tab text color
* $type color
*/
$tabs-tab-color: color.change($base-text-color, $alpha: 0.54) !default;

/**
* $name 20. Selected tab text color
* $type color
*/
$tabs-tab-selected-color: $base-accent !default;

/**
* $name 30. Disabled tab color
* $type color
*/
$tabs-tab-disabled-color: color.change($tabs-tab-color, $alpha: 0.32) !default;

/**
* $name 40. Selected tab border color
* $type color
*/
$tabs-selected-tab-border-color: $base-accent !default;

/**
* $name 50. Disabled tab border color
* $type color
*/
$tabs-disabled-tab-border-color: null !default;

/**
* $name 60. Tab background color
* $type color
*/
$tabs-tab-background: $base-bg !default;

/**
* $name 70. Tab icon color
* $type color
*/
$tabs-tab-icon-color: $tabs-tab-color !default;

/**
* $name 80. Selected tab icon color
* $type color
*/
$tabs-tab-icon-selected-color: $tabs-tab-selected-color !default;

/**
* $name 90. Disabled tab icon color
* $type color
*/
$tabs-tab-icon-disabled-color: color.change($tabs-tab-icon-color, $alpha: 0.32) !default;
$tabs-tab-button-disabled-opacity: 0 !default;

/**
* $name 100. Hovered tab background color
* $type color
*/
$tabs-hovered-tab-bg-color: color.change($base-accent, $alpha: 0.08) !default;

/**
* $name 110. Focused tab background color
* $type color
*/
$tabs-focused-tab-bg-color: color.change($base-accent, $alpha: 0.12) !default;

/**
* $name 120. Active tab background color
* $type color
*/
$tabs-active-tab-bg-color: color.change($base-accent, $alpha: 0.16) !default;

@if $mode == "light" {
  $tabs-disabled-tab-border-color: color.change($tabs-tab-color, $alpha: 0.13) !default;
}

@if $mode == "dark" {
  $tabs-disabled-tab-border-color: color.change($tabs-tab-color, $alpha: 0.4) !default;
}