@charset "UTF-8";
@import "../theme/variables";
@import "~@jereation/sass-helpers/_mixins";

// bar
// ---------------------------------------------------------------------------------------------------------------------
.vui-bar {
  position: relative;
  @include display-flex;
  @include align-items(center);
  height: map-get($bar, height);
  padding: .25rem * $rem-ratio;
  &:not(.vui-bar-header):not(.vui-bar-subheader):before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #e7e7e7;
  }
  &:not(.vui-bar-footer):after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e7e7e7;
  }
  &.vui-no-padding {
    padding: 0;
  }
  &.vui-bar-header, &.vui-bar-subheader, &.vui-bar-footer {
    position: absolute;
    right: 0;
    left: 0;
  }
  &.vui-bar-header {
    top: 0;
  }
  &.vui-bar-subheader {
    top: map-get($bar, height);
    background-color: #fff;
  }
  &.vui-bar-footer {
    bottom: 0;
    &:after {
      top: 0;
    }
  }
  &.vui-has-button .vui-bar-title {
    left: 89px;
    right: 89px;
  }
}

.vui-bar-title {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 10px;
  min-width: 30px;
  height: map-get($bar, height);
  line-height: (map-get($bar, height) + 0.1) * $line-height-ratio;
  font-size: 0.85rem * $rem-ratio;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  img {
    max-width: 100%;
    max-height: 100%;
    padding-top: .25rem * $rem-ratio;
    padding-bottom: .25rem * $rem-ratio;
  }
}

.vui-bar .vui-button, .vui-bar button {
  padding: 0 .6rem * $rem-ratio;
  height: map-get($bar, inner-height) - 0.1;
  line-height: (map-get($bar, inner-height) - 0.2) * $line-height-ratio;
  font-size: .7rem * $rem-ratio;
  border-radius: .1rem * $rem-ratio;
}

.vui-bar .vui-button.vui-button-clear, .vui-bar button.vui-button-clear {
  padding-right: 2px;
  padding-left: 2px;
  font-weight: 300;
}

.vui-bar .vui-bar-title + .vui-button:last-child, .vui-bar > .vui-button + .vui-button:last-child {
  position: absolute;
  right: .25rem * $rem-ratio;
  top: .3rem * $rem-ratio;
}

// bar normal
// ---------------------------------------------------------------------------------------------------------------------
.vui-bar {
  border-color: #e7e7e7;
  background-color: #f8f8f8;
  color: #444;
}

// bar-green
// ---------------------------------------------------------------------------------------------------------------------
.vui-bar.vui-bar-green {
  border-color: #029600;
  background-color: #04be02;
  color: #fff;
}

.vui-bar.vui-bar-green .vui-bar-title, .vui-bar.vui-bar-green .vui-button-clear {
  color: #fff;
}

// bar-dark
// ---------------------------------------------------------------------------------------------------------------------
.vui-bar.vui-bar-dark {
  border-color: #111;
  background-color: #444;
  color: #fff;
}

.vui-bar.vui-bar-dark .vui-bar-title, .vui-bar.vui-bar-dark .vui-button-clear {
  color: #fff;
}

// bar-blue
// ---------------------------------------------------------------------------------------------------------------------
.vui-bar.vui-bar-blue {
  border-color: #007aff;
  background-color: #007aff;
  color: #fff;
}

.vui-bar.vui-bar-blue .vui-bar-title, .vui-bar.vui-bar-blue .vui-button-clear {
  color: #fff;
}