//
// Copyright 2019 Stijn de Witt. Some rights reserved.
// Licensed under the MIT Open Source license. 
// https://opensource.org/licenses/MIT
// See LICENSE for details.
//
// Based on code copyright 2018 Google Inc. All Rights Reserved.
// Licensed under the Apache License, Version 2.0.
// http://www.apache.org/licenses/LICENSE-2.0
// See LICENSE-MDC for details.
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under these licenses is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the licenses for the specific language governing permissions and
// limitations under these licenses.
// 

@import "../animation/functions";
@import "../theme/mixins";
@import "../rtl/mixins";

$mdc-tab-bar-scroller-indicator-width: 48px;

// postcss-bem-linter: define tab-bar-scroller

.mdc-tab-bar-scroller {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  background-color: inherit;
  overflow: hidden;

  &__scroll-frame {
    display: flex;
    position: relative;
    flex: 1;
    justify-content: flex-start;
    overflow: hidden;

    &__tabs {
      transition: mdc-animation-enter(transform, 240ms);
      will-change: transform;
    }
  }

  &__indicator {
    @include mdc-theme-prop(color, text-secondary-on-background);

    &:hover {
      @include mdc-theme-prop(color, text-primary-on-background);
    }

    display: flex;
    align-items: center;
    justify-content: center;
    width: $mdc-tab-bar-scroller-indicator-width;
    cursor: pointer;
    visibility: hidden;

    &__inner {
      color: inherit;
      text-decoration: inherit;
      cursor: inherit;

      &:focus {
        outline-color: inherit;
      }

      @include mdc-rtl(".mdc-tab-bar-scroller") {
        transform: rotate(180deg);
      }
    }

    &__inner:hover {
      color: inherit;
    }
  }

  &__indicator--enabled {
    visibility: visible;
  }
}

// postcss-bem-linter: end
