$mu-web-browser-tab-border-radius: 10px;
$mu-color-browser-inactive-tabs: darken($mu-color-component-title-background, 5%);

.mu-browser {
  width: 100%;
  position: relative;
  header {
    margin-bottom: 0;
    @include display-flex(column nowrap, flex-start, flex-start);
    .mu-browser-tabs {
      width: 100%;
      list-style: none;
      margin-bottom: 0;
      padding-left: 0;
      border: $mu-component-border;
      border-bottom: none;
      background-color: $mu-color-browser-inactive-tabs;
      border-top-left-radius: $mu-web-browser-tab-border-radius;
      border-top-right-radius: $mu-web-browser-tab-border-radius;
      @include display-flex(row nowrap, flex-start, center);
      .mu-browser-tab {
        @include display-flex(row nowrap, flex-start, center);
        margin-left: -2px;
        padding: 2px 10px;
        border: $mu-component-border;
        background-color: $mu-color-component-title-background;
        img {
          height: 16px;
          width: 16px;
          object-fit: cover;
          margin-right: 5px;
        }
        &.active {
          z-index: 2;
          margin-bottom: -2px;
          border-bottom: none;
          border-top-left-radius: $mu-web-browser-tab-border-radius;
          border-top-right-radius: $mu-web-browser-tab-border-radius;
          width: 250px;
          span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        &.mu-browser-new-tab {
          height: 36px;
          width: 36px;
          margin: 0 0 -2px 2px;
          font-size: 75%;
          border-top-left-radius: $mu-web-browser-tab-border-radius;
          border-top-right-radius: $mu-web-browser-tab-border-radius;
          background-color: darken($mu-color-browser-inactive-tabs, 2.5%);
        }
      }
    }
    .mu-browser-bar {
      width: 100%;
      padding: 15px;
      border: $mu-component-border;
      background-color: $mu-color-component-title-background;
      @include display-flex(row nowrap, flex-start, center);
      i {
        cursor: pointer;
        font-size: 25px;
        margin-right: 10px;
        @extend .fas;
        @extend .fa-fw;
        &.mu-arrow-left {
          @extend .fa-arrow-circle-left;
        };
        &.mu-arrow-right {
          @extend .fa-arrow-circle-right;
        };
        &.mu-refresh {
          @extend .fa-sync-alt;
        }
      }
      input {
        border: 1px solid $mu-color-component-border;
        padding: 0 10px;
        height: 30px;
        border-radius: 10px;
        width: 100%;
        &:focus { outline: none }
      }
    }
  }
  main {
    position: relative;
    border: $mu-component-border;
    border-top: none;
    margin-top: 0;
    height: 500px;
    min-height: 500px;
    iframe {
      width: 100%;
      height: 100%;
      border: none;
      overflow: auto;
    }
  }
}