@import "/imports/ui/stylesheets/variables/breakpoints";
@import "/imports/ui/stylesheets/variables/placeholders";

.tabs {
  @extend %flex-row;
  justify-content: flex-start;
  @include mq($small-only) {
    width: 100%;
    flex-flow: column;
  }
}

.tabList {
  @extend %flex-column;
  @extend %no-margin;
  border: none;
  padding: 0;
  width: calc(100% / 3);

  @include mq($small-only) {
    width: 100%;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.icon {
  margin: 0 .5rem 0 0;
  font-size: var(--font-size-large);

  [dir="rtl"] & {
     margin: 0 0 0 .5rem;
  }
}

.tabSelector {
  @extend %flex-row;
  font-size: 0.9rem;
  flex: 0 0 auto;
  justify-content: flex-start;
  border: none !important;
  padding: var(--md-padding-y) var(--md-padding-x);
  color: var(--color-gray-dark);
  border-radius: .2rem;
  cursor: pointer;
  margin-bottom: var(--sm-padding-y);
  align-items: center;
  flex-grow: 0;
  min-width: 0;
  & > span {
    @extend %text-elipsis;
  }

  @include mq($small-only) {
    max-width: 100%;
    margin: 0 var(--sm-padding-x) 0 0;
    & > .icon {
      display: none;
    }

    [dir="rtl"] & {
       margin: 0 0 0 var(--sm-padding-x);
    }
  }
}

.selected {
  color: var(--color-white);
  background-color: var(--color-primary);
  font-weight: bold;

  & > .icon {
    color: var(--color-white);
  }
}

.tabPanel {
  display: none;
  margin: 0 0 0 1rem;
  width: calc(100% / 3 * 2);

  [dir="rtl"] & {
    margin: 0 1rem 0 0;
  }

  @include mq($small-only) {
    width: 100%;
    margin-left: 1rem;
    margin-right: inherit;

   [dir="rtl"] & {
     margin-left: inherit;
     margin-right: 1rem;
   }

  }
}

.selectedTab {
  display: block;
}

.toggleLabel {
  margin-right: var(--sm-padding-x);

  [dir="rtl"] & {
    margin: 0 0 0 var(--sm-padding-x);
  }
}