@import './index'

/*
  <div class="tab">
    <div class="tab-header">
      <Button className="tab-button" .../>
      <Button className="tab-button selected" .../>
    </div>
    <div class="tab-header"></div>
    <div class="tab-results"></div>
    <div class="tab-footer"></div>
  </div>
*/

.tab
  padding: 0.5em;

.tab-header
  background-color: transparent

.tab-results
  overflow-y: auto;
  overflow-x: hidden;
  height: inherit;

.tab-content
  background-color:  $app['palette']['bg-secondary']['1']
  color:  $app['palette']['text-secondary']['1']

.tab-footer
  background-color:  $app['palette']['bg-secondary']['1']
  border-radius: 0 0 0.5em 0.5em
  height: 1em

.tab-button
  background-color: inherit;
  border-color: inherit;
  display: inline-flex
  padding: 0.2em 0.5em
  margin: 0.5em 0 0 0;

.tab-button label
  position: relative
  margin: 0 1em

.tab-button .label
  border: none

.tab-button.selected
  background-color:  $app['palette']['bg-secondary']['1']
  color:  $app['palette']['text-secondary']['1']

.tab-button.selected,
.tab-button:hover
  opacity: 1
  color:  $app['palette']['text-thirdary']['1']
  border-radius: 0.5em 0.5em 0 0

.tab-button.selected:hover
  opacity: 1

.tab-button:hover
  opacity: 0.5

.tab-button .button-push-icon
  position: absolute


.tab-content > .loading
  height: 100%