/**
 * @file
 * Visual styles for tabs.
 */

div.tabs {
  margin: 1em 0;
}
ul.tabs {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs > li {
  display: inline-block;
  margin-right: 0.3em; /* LTR */
}
[dir="rtl"] .tabs > li {
  margin-right: 0;
  margin-left: 0.3em;
}
.tabs a {
  display: block;
  padding: 0.2em 1em;
  text-decoration: none;
}
.tabs a.is-active {
  background-color: #fff;
  color: $red;
}
.tabs.primary > li > a.is-active {

  color: $red;
}
.tabs a:focus,
.tabs a:hover {
  background-color: #fff;
}
//lp search tabs
.searchtabs__container {
    margin-top: $global-margin;
    @include flex-grid-row();
    //@include callout;

}
.searchtabs {
    width:100%;
    @include callout;
    background: #757575;
    border:0px;
    ul {

        border:0px;
    }
    .tabs-title > a {

        border-radius: $global-radius $global-radius 0 0;
        color:$white;
        font-weight:600;
        font-size: rem-calc(18);
        font-family: $roboto-condensed;
        margin-right:2px;
        padding:0px;
    padding: 0.8rem 1rem;
    @include breakpoint(medium) {
        padding: 0.8rem 1.5rem;
    }
        &:hover {

            color: $primary-color;
        }

    }
    .tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
        color: $primary-color;
        outline:none;
    }
    .tabs-content {
        padding: $global-padding;
        border-radius: 0 $global-radius $global-radius $global-radius;

    }
}

.form-submit {
}
.searchtabs {
    form {
        @extend .input-group;
    }
    input[type="submit"] {

        @extend .input-group-button;
        @include button();
        @include button-style(
        //$background, 
        $success-color,
        //$background-hover, 
        auto,
        //$color
        auto
        );
        border-radius: 0 $global-radius $global-radius 0;

        margin-bottom:0;
    }
    input[type="text"] {

        @extend .input-group-field;
        //@include button();
        border-radius: $global-radius 0 0 $global-radius;
        background:#fff;
    }
    .tabs-panel {
        @include padding(1,0,0,0);
    }
    .tabs {
    background: #757575;}
}
.searchtabs .tabs-title > a:focus, .searchtabs .tabs-title > a[aria-selected='true'] {
    color: #8C2004;
    background: #fff;
    outline: none;
}