/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

// Custom Canvas branding for tabs -- overwriting the defaults in the jQuery UI tabs styles

.ui-tabs {
  .ui-tabs-panel {
    border-color: $ic-border-light;
    padding: 14px;
  }
  .ui-tabs-nav {
    border-bottom-color: $ic-border-light;
    li {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      a {
        @include ic-focus-base;
        color: var(--ic-link-color);
        font-weight: normal;
        padding: 8px 14px;
        text-shadow: none;
        @if $use_high_contrast { text-decoration: underline; }
        &:focus {
          @if $use_high_contrast { @include ic-focus-variant(var(--ic-link-color), -4px); }
          @else {
            text-decoration: underline;
            outline: none;
          }
        }

        // special handling for Calendar tabs with solid-color header backgrounds
        #edit_event & { color: $ic-color-light; }
      }
      &.ui-state-hover,
      &:hover {
        background: $ic-color-light;
        border-color: $ic-border-light;
        a {
          color: $ic-font-color-dark;
          @if $use_high_contrast { text-decoration: none; }

          // special handling for Calendar tabs with solid-color header backgrounds
          #edit_event & { color: var(--ic-link-color); }
        }
      }
      &.ui-state-focus,
      &.ui-state-focus.ui-tabs-active {
        outline: none;
        border-color: $ic-border-light;
        background: $ic-color-light;
        a {
          @if $use_high_contrast { @include ic-focus-variant(var(--ic-link-color), -4px); }
          @else {
            text-decoration: underline;
            outline: none;
          }
        }
      }
      &.ui-tabs-active,
      &.ui-tabs-active.ui-state-hover,
      &.ui-tabs-active:hover {
        border-color: $ic-border-light;
        background: $ic-color-light;
        a {
          @if $use_high_contrast { text-decoration: none; }

          // special handling for Calendar tabs with solid-color header backgrounds
          #edit_event & { color: $ic-font-color-dark; }
        }
      }
    }
  }

  &.ui-tabs--mini {
    .ui-tabs-nav {
      li {
        a { padding: 4px 8px; }
      }
    }
  }

  &.ui-tabs-minimal {
    .ui-tabs-panel {
      border-width: 0;
      padding-#{direction(left)}: 0;
      padding-#{direction(right)}: 0;
      padding-bottom: 0;
    }
  }
}
