@import "globals";

$leybold-toolbar-background: #005470 !default;
$leybold-tab-border-color: #FFEB3B !default;
$leybold-tab-background-color: $leybold-toolbar-background !default;
$leybold-tabs-box-shadow: 0 2px 5px rgba(0,0,0,0.26) !default;

.#{$prefix}toolbar {

    min-height: $leybold-toolbar-height;
    background: $leybold-toolbar-background;
    box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.5);
    color: #fff;

    .#{$prefix}toolbar-btns {
        height: $leybold-toolbar-height;
        display: flex;
        padding: 0 1em;
        align-items: center;

        .#{$prefix}toolbar-fill {
            flex-grow: 1;
            flex-shrink: 1;
        }

        .#{$prefix}toolbar-heading, .#{$prefix}toolbar-text, button {
            height: $leybold-toolbar-height;
            line-height: 3em;
            font-weight: 700;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
        }

        .#{$prefix}toolbar-heading {
            font-size: 1.1em;
        }

        .#{$prefix}toolbar-text, button {
            padding: 0 ($leybold-toolbar-height - 1em)/2;
        }

        button {
            margin: 0;
            background: transparent;
            border: 0;
            cursor: pointer;
            outline: 0;
            display: inline-flex;
            align-items: center;
            justify-items: center;
        }

        button[disabled] {
            opacity: 0.5;
            cursor: default;
        }

        .#{$prefix}toolbar-icon {
            display: inline-flex;
            align-self: center;
            &:not(:last-child) {
                margin-right: .5em;
            }
        }
    }

}

.#{$prefix}toolbar-tabs {
  font-size: 1em;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  background: $leybold-tab-background-color;

  li {
    a {
      color: #fff;
      display: block;
      padding: 1em 2em;
      outline: none;
      border-bottom: 3px solid transparent;
      text-decoration: none;
      opacity: 0.8;
    }
    &.#{$prefix}active {
      a {
        border-bottom: 3px solid $leybold-tab-border-color;
        opacity: 1;
        animation: leybold-tab-ripple 0.2s linear forwards;
      }
    }
  }
}

@keyframes leybold-tab-ripple {
  0% {
    background: transparent;
  }
  50% {
    background: rgba(255, 255, 255, 0.05);
  }
  100% {
    background: transparent;
  }
}