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

.folder-name {
  height: 120px;
}

.tab-title__input-container {
  margin: 0;
  width: 100%;

  input {
    letter-spacing: -0.015em;
  }
}

.tab-title__input {
  font-size: 34px;
  font-weight: 300;
}

.folder-name__menu-btn {
  color: #fff;
  display: block;
  font-size: 30px;
  height: 42px;
  padding: 0;
  width: 38px;
}

$folder-border-width: 3px;
$folder-entry-icon-height: 52px;

.folder-entry {
  border-style: solid;
  height: auto;
  position: absolute;
  top: 3 * $folder-entry-icon-height;
  transition-property: transform, box-shadow, background-color !important; // prevent animation on hiding
  width: 34px;

  @include border-right-radius($folder-border-width);
  @include border-width(0 $folder-border-width 0 0);

  &.folder-entry--current,
  &.folder-entry--selected {
    &,
    .folder-entry__button.md-focused,
    .folder-entry__button:hover {
      background-color: #fff;
    }
  }
}

.folder-entry--current {
  display: none;
  top: 3 * $folder-entry-icon-height;
  z-index: 10000;
}

.folder-entry__button {
  border-radius: 0;
  color: rgba(0, 0, 0, 0.67);
  font-size: 14px;
  letter-spacing: 0;
  padding: 12px 0;
  text-transform: none;
  vertical-align: middle;
  width: 100%;

  [class^='icon-'],
  [class*=' icon-'] {
    font-size: 1em;
  }
}

.folder-entry__inner {
  display: inline-block;
  line-height: 32px;
  min-height: $folder-entry-icon-height;
  width: 32px;

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

  .cl-public-corner {
    display: none;
  }
}

.folder-entry__inner--public {
  padding-top: 10px;

  .cl-public-corner {
    display: block;
  }

  .cl-sharing-indicator::after {
    top: 18px;
  }
}

.folder-entry--recent,
.folder-entry--unclassified,
.folder-entry--create {
  height: $folder-entry-icon-height;
  top: 0;
  width: 44px;
  z-index: 9998;

  @include border-right-radius($folder-border-width);

  .folder-entry__button {
    font-size: 24px;
    padding: 0;
  }
}

.folder-entry--unclassified {
  top: $folder-entry-icon-height;
  width: 42px;

  .icon-search {
    display: inline-block;

    @include transform(scale(-1, 1));
  }
}

.folder-entry--create {
  top: 2 * $folder-entry-icon-height;
  width: 40px;

  .folder-entry__button {
    font-size: 22px;
  }
}

.folder-entry__icon {
  line-height: $folder-entry-icon-height;
}
