@import 'bourbon';
@import 'variables';

.settings-page {
  .navbar__inner {
    max-width: 560px;
    width: 100%;
  }

  md-tabs {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
  }

  md-select,
  md-slider {
    max-width: 250px;
  }

  md-select {
    margin-top: 0;
  }

  .footer {
    padding-right: $tab-width;
  }
}

.settings-page__inner-1 {
  height: 100%;
  margin: auto;
  max-width: 560px;
  padding: 33px 5px 0;
}

.settings-page__inner-2 {
  min-height: 100%;

  @include border-bottom-radius(3px);
}

.tab-content {
  background-color: #fff;
  border-top-style: solid;
  border-top-width: $tab-top-offset;
  position: relative;
}

.tab-content__inner {
  overflow: auto;
  overflow-x: hidden;

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

.tab-list {
  background-color: $background-color;
  margin-right: -25px;
  position: relative;
  width: $tab-width + 25px;
  z-index: 1;
}

.tab-list__shadow {
  left: -50px;
  width: 50px;
  z-index: 9999;
}

.tab-list__entry {
  background-color: #fff;
  border-style: solid;
  height: $tab-entry-height;
  letter-spacing: 0;
  padding: 0 0 0 2px;
  text-transform: none;
  top: $tab-top-offset;
  transition-property: transform, box-shadow, background-color;
  vertical-align: middle;
  width: 34px;
  z-index: 99;

  @include animation-name(transform, box-shadow, background-color);
  @include animation-duration(0.4s);
  @include animation-timing-function(cubic-bezier(0.25, 0.8, 0.25, 1));
  @include transform(translateX(-5px));
  @include border-right-radius($tab-border-width);
  @include border-left-radius(0);
  @include border-width(0 $tab-border-width 0 0);

  &:hover {
    @include transform(translateX(-1px));
  }

  &.tab-list__entry--selected.panel {
    &,
    &.md-focused,
    &:hover {
      background-color: #fff;
      z-index: 10000;

      @include transform(translateX(0));
    }
  }

  > span {
    color: rgba(0, 0, 0, 0.67);

    @include prefixer(writing-mode, vertical-lr, webkit spec);
  }
}

.tab-list__entry--2 {
  top: $tab-top-offset + $tab-entry-height;
  z-index: 98;
}

.tab-list__entry--3 {
  top: $tab-top-offset + 2 * $tab-entry-height;
  z-index: 97;
}

.tab-list__entry--4 {
  top: $tab-top-offset + 3 * $tab-entry-height;
  z-index: 96;
}

.settings-page__tab {
  margin: 40px 30px 80px;
}

.settings-page__entry {
  width: 100%;
}

.settings-page__entry--small {
  max-width: 220px;
}

.settings-page__entry--large {
  max-width: 340px;
}

.settings-page__entry-label {
  color: rgba(0, 0, 0, 0.54);
  display: block;
  font-size: 12.5px;
  padding: 2px;
}

.settings-page__entry-btn {
  color: rgba(0, 0, 0, 0.67);
  font-size: 22px;
}

.file-entry__button {
  font-size: 28px;
  height: 38px;
  max-width: 32px;
  min-width: 32px;
  padding: 0;
}

.blog-dialog {
  min-width: 340px;

  md-input-container {
    padding-bottom: 8px;
  }
}

.handlebars-dialog {
  min-width: 360px;

  .prism--editor {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    min-height: 120px;
    overflow: auto;
    width: 100%;
    word-wrap: normal;
  }
}

.handlebars-dialog__example {
  padding-left: 30px;
}
