@import 'select2/dist/css/select2';

.Browser {
  @include trbl(0);
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.Browser-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 100%;
  box-shadow: inset 0 -1px 0 0 $color-frame-border;
}

.Browser-tabs {
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    display: none;
  }
}

.Browser-tab {
  display: flex;
  flex: auto;
  white-space: nowrap;

  a {
    @include font(caption);
    @include link-default($color-text, none);
    width: 100%;
    padding: 0.75rem 0.75rem 0.875rem;
    border-bottom: 0.125rem solid transparent;
    text-align: center;

    &:hover {
      border-bottom-color: #cccccc;
    }
  }

  &.is-active {
    a {
      border-bottom-color: $color-link;
      font-weight: bolder;
    }
  }

  &.is-disabled {
    a {
      opacity: 0.5;
    }
  }
}

.Browser-panel {
  flex: 1 1 auto;
  display: none;
  overflow: auto;
  width: 100%;
  background-color: $color-background-offset;
  padding: 0.75rem;

  &.is-active {
    display: flex;
  }

  .Code {
    background-color: $color-background-offset;

    pre {
      background-color: $color-background-offset;
      padding: 0;
    }
  }

  > .Meta {
    flex-basis: 100%;
  }
}

.Browser-isEmptyNote {
  font-style: italic;
  color: $color-text;
  opacity: 0.6;
}