/**
 *
 * @ai-apps/angular v2.152.0 | _breadcrumb.scss
 *
 * Copyright 2014, 2023 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * 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.
 */


@import '../../vendor/carbon-components/scss/components/breadcrumb/breadcrumb';

.#{$prefix}--breadcrumb {
  display: flex;
  flex-wrap: nowrap;
}

.breadcrumb--container {
  &__overflowfull {
    .#{$prefix}--breadcrumb-item {
      min-width: 0;
    }

    .#{$prefix}--breadcrumb-item > * {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.breadcrumb--overflow {
  display: flex;
  &:after {
    content: '/';
    margin-left: $spacing-03;
  }
  margin-right: $spacing-03;

  .#{$prefix}--overflow-menu {
    height: auto;
    width: auto;

    & svg {
      fill: $link-01;
      border-bottom: 1px solid transparent;
    }

    &:hover {
      background: none;
    }

    &:hover svg {
      border-color: $link-01;
    }

    &.#{$prefix}--overflow-menu--open {
      background: none;
      box-shadow: none;
    }
  }
}

.breadcrumb--overflow-items {
  &.#{$prefix}--overflow-menu-options--open {
    transform: translate(-45%, 1rem);

    &:focus {
      outline: none;
    }
  }
  &.#{$prefix}--overflow-menu-options::after,
  &.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
    transform: translate(-50%, -8px);
    background: none;
    left: 50% !important;
    border-left: 0.75rem solid #0000;
    border-right: 0.75rem solid #0000;
    border-bottom: 0.75rem solid #fff;
    width: 0;
    height: 0;
  }

  .#{$prefix}--overflow-menu-options__option:nth-child(even) {
    background-color: $field-02;

    &:hover {
      background-color: $hover-ui;
    }
  }

  .#{$prefix}--overflow-menu-options__btn {
    text-decoration: none;
  }
}

html[dir='rtl'] .breadcrumb--container {
  .#{$prefix}--breadcrumb-item::after,
  .breadcrumb--overflow:after,
  .#{$prefix}--breadcrumb-item:last-child,
  .#{$prefix}--breadcrumb-item:last-child::after {
    margin-left: auto;
    margin-right: $spacing-03;
  }
}
