@import "../../stylesheets/variables/_all";

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

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

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

.icon {
  margin-right: .5rem;
  font-size: $font-size-large;
}

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

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

.selected {
  color: $color-white;
  background-color: $color-primary;
  font-weight: bold;

  & > .icon {
    color: $color-white;
  }
}

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

  @include mq($small-only) {
    width: 100%;
    margin-left: 0;
    margin-top: 1rem;
  }
}

.selectedTab {
  display: block;
}