// Copyright 2020 Energinet DataHub A/S
//
// Licensed under the Apache License, Version 2.0 (the "License2");
// 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.
@use "@energinet-datahub/watt/utils" as watt;

watt-drawer {
  watt-tabs {
    .mat-mdc-tab-group,
    .mat-mdc-tab-body-wrapper {
      height: 100%;
    }
  }
}

watt-tabs {
  &.watt-tabs-secondary {
    .mat-mdc-tab.mat-mdc-tab:hover {
      border-bottom: none;
    }

    .mdc-tab {
      padding-left: var(--watt-space-m);
      padding-right: var(--watt-space-m);
      height: 32px;
    }

    .mat-mdc-tab-group.mat-primary .mdc-tab.cdk-focused.cdk-keyboard-focused:focus {
      background-color: transparent;
    }

    .mat-mdc-tab-group,
    .mat-mdc-tab-nav-bar {
      --mat-tab-active-focus-indicator-color: var(--watt-color-secondary);
      --mat-tab-active-focus-label-text-color: var(--watt-color-neutral-black);
      --mat-tab-active-hover-indicator-color: var(--watt-color-secondary);
      --mat-tab-active-hover-indicator-color: var(--watt-color-secondary);
      --mat-tab-active-hover-label-text-color: var(--watt-color-neutral-black);
      --mat-tab-active-label-text-color: var(--watt-color-neutral-black);
      --mat-tab-inactive-label-text-color: var(--watt-on-light-low-emphasis);
      --mat-tab-inactive-ripple-color: none;
      --mat-tab-disabled-ripple-color: none;
      --mat-tab-active-indicator-color: var(--watt-color-secondary);
      --mat-tab-active-indicator-height: 3px;
      --mat-tab-active-indicator-shape: 99999px;
      --mat-tab-active-ripple-color: transparent;
    }

    .mat-mdc-tab-header {
      background: none;
      box-shadow: none;
    }

    .mat-mdc-tab-labels {
      flex-wrap: wrap;
      padding-left: 0;
    }

    .mdc-tab-indicator__content--underline {
      width: 43px;
    }

    .mat-mdc-tab-body-wrapper {
      padding: var(--watt-space-s);
      padding-top: var(--watt-space-m);
    }
  }

  .mat-mdc-tab.mdc-tab.watt-tabs-action {
    flex-grow: 1;
    justify-content: flex-end;
    cursor: default;
    height: auto;

    &.mat-mdc-tab-disabled {
      opacity: 1;
    }
    &.mat-mdc-tab-disabled,
    .mdc-tab__content {
      pointer-events: initial;
    }

    &:hover {
      border-bottom: none;
      .mdc-tab__ripple {
        display: none;
      }
    }
  }

  .mat-mdc-tab-body {
    width: 100%;
  }

  .mat-mdc-tab-group,
  .mat-mdc-tab-body-wrapper {
    height: 100%;
  }

  .mat-mdc-tab-group.mat-primary .mdc-tab.cdk-focused.cdk-keyboard-focused:focus {
    background-color: var(--watt-color-primary-ultralight);
  }

  .mat-mdc-tab-labels {
    padding-left: var(--watt-space-ml);
  }

  .mat-mdc-tab {
    min-width: 120px;
    opacity: 1;

    .mdc-tab__content {
      @include watt.typography-watt-button;
      color: var(--watt-on-light-medium-emphasis);
    }

    &.mat-mdc-tab-active {
      border-bottom: 2px solid var(--watt-color-primary);
    }
    &.mat-mdc-tab:hover {
      border-bottom: 2px solid var(--watt-color-primary);
    }

    &.mat-mdc-tab-active,
    &.mat-mdc-tab:hover {
      color: var(--watt-on-light-medium-emphasis);

      .mdc-tab__content {
        color: var(--watt-color-primary);
      }
    }
  }

  .mat-mdc-tab-body-wrapper {
    padding: var(--watt-space-ml);
  }

  .mat-mdc-tab-body.mat-mdc-tab-body-active,
  .mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active,
  .mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content {
    position: relative;
    overflow: initial;
  }

  .mat-tab-label-container {
    padding-left: var(--watt-space-ml);
  }

  .mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination {
    display: none;
  }

  .mat-mdc-tab-header {
    box-shadow: var(--watt-bottom-box-shadow);
    background-color: var(--watt-color-neutral-white);
  }

  .mat-ink-bar {
    display: none;
  }
}
