@import "variables";
@import "mixins";

$comp-tabs-filter-m: 0 15px 0 0 !default;

section.component-tabs {
  .tabs-filter {
    margin-bottom: $space-md;
    > .tab-filter {
      opacity: 0.7;
      margin: $comp-tabs-filter-m;
      &.active {
        opacity: 1;
      }
    }
  }
  .tabs-content {
    > .tab-content {
      opacity: 0;
      height: 0;
      pointer-events: none;
      transition: 0;
      &.active {
        opacity: 1;
        height: fit-content;
        pointer-events: all;
        transition: $trans-h;
      }
      ul,
      ol {
        padding-left: 15px;
      }
    }
  }
  .tabs-wrap {
    @include bp("md") {
      .tabs-filter {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        > .tab-filter {
          flex: none;
        }
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
}
