@import "../variable";
@import "../mixin";
@import "../index";

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.tab--around {
  justify-content: space-around;
}
.tab--between {
  justify-content: space-between;
}

.tab {
  overflow: hidden;
  background-color: color(--secondary);
  border: 1px solid color(--secondary-ext-1);
  display: flex;
  border-radius: radius(--medium);
}

.tab--pill--vertical {
  display: flex;
  flex-direction: column;
  div {
    cursor: pointer;
    background-color: color(--secondary);
    color: color(--primary);
    margin-right: -4px;
    flex-grow: 1;
    flex-shrink: 1;
    padding-left: 10px;
    transition: all ease-in-out .2s;
    &.active{
      background-color: color(--primary);
      color: color(--secondary);
    }
    &:hover {
      background: color(--primary);
      color:color(--secondary);
    }
  }
}


.tab--small {
  div {
    padding-top: 5px;
    padding-bottom:  5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }
}

.tab--medium {
  div {
    padding-top: 10px;
    padding-bottom:  10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }
}


.tab--large {
  div {
    padding-top: 15px;
    padding-bottom:  15px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
  }
}





.pill--small {
  div {
    padding-top: 5px;
    padding-bottom:  5px;
    font-size: 12px;
  }
}

.pill--medium {
  div {
    padding-top: 10px;
    padding-bottom:  10px;
    font-size: 14px;
  }
}


.pill--large {
  div {
    padding-top: 15px;
    padding-bottom:  15px;
    font-size: 16px;
  }
}

.tab--pill--horizontal {
  display: flex;
  flex-direction: row;
  div {
    cursor: pointer;
    background-color: color(--secondary);
    color: color(--primary);
    transition: all ease-in-out .5s;
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center;
    &:not(:first-child),
    &:not(:last-child)
    {
      border-style: solid;
      border-top-color: color(--primary);
      border-bottom-color: color(--primary);
      border-right-color: color(--primary);
      border-left: none;
      border-width: 1px;
    }

    &.active{
      background-color: color(--primary);
      color: color(--secondary);
    }
    &:first-child {
      border-top-left-radius: radius(--medium);
      border-bottom-left-radius: radius(--medium);
      border-style: solid;
      border-left-color: color(--primary);
      border-width: 1px;
    }
    &:last-child {
      border-top-right-radius: radius(--medium);
      border-bottom-right-radius: radius(--medium);
      border-style: solid;
      border-top-color: color(--primary);
      border-bottom-color: color(--primary);
      border-right-color: color(--primary);
      border-left: none;
      border-width: 1px;
    }
    &:hover {
      background: color(--primary);
      color:color(--secondary);
    }
  }
}
.tab {
  div {
    cursor: pointer;
    transition: border-bottom ease-in-out .1s;
    color: color(--tertiary-ext-1);
    padding-left: 30px;
    padding-top: 20px;
    border-bottom: 4px solid transparent;
    font-size: 12px;
    &:hover,
    &.active{
      border-bottom: 4px solid color(--primary);
    }
  }
}

.tabcontent {
  display: none;
  padding: 10px 15px;
  border-top: none;
  animation: fadeEffect 1s;
}