/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require bootstrap
 *= require_tree .
 */

@import 'variables';

$headerheight: 70px;

html, body {
  height: 100%;
  .wrapper {
    min-height: calc(100vh - #{$headerheight});
    height: 100%;
  }
}

body {
  padding-top: $headerheight;
}

.translation_missing_container .row {
  padding: 1rem 0;
  border-bottom: 1px solid #e5e5e5;
}

.editor_container {
  .ace_editor {
    overflow: hidden;
  }
}

$border-color: $lightest_grey;
$titleheight: 70px;
$translation_container_offset: $titleheight+$headerheight;

div.translation_title {
  height: $titleheight;
}
div.translation_container {
  border-top: 1px solid $border-color;
  min-height: calc(100vh - #{$translation_container_offset});
  div.translation_list {
    border-right: 1px solid $border-color;
    padding-right: 0;
    padding-left: 0;
    min-height: calc(100vh - #{$translation_container_offset+1});
    div.translation_filter {
      padding: 1rem;
      background-color: $white_grey;
      border-bottom: 1px solid $border-color;
      input[type="text"] {
      }
    }
    div.translation_item {
      padding: 2rem;
      cursor: pointer;
      &.active {
        background-color: #4183C4;
      }
      &:nth-child(even) {
        background-color: $white_grey;
      }
      &:hover:not(.active) {
        background-color: $lighter_grey;
      }

      border-bottom: 1px solid $border-color;

      .translation_filename {
        direction: rtl;
        overflow: hidden;
        text-overflow: ellipsis;
        unicode-bidi: bidi-override;
        font-style: italic;
      }

      &.active {
        background-color: #6B9ED1;
        color: white;
        position: relative;

        &:after, &:before {
          left: 100%;
          top: 50%;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
        }

        &:after {
          border-color: rgba(65, 131, 196, 0);
          border-left-color: #6B9ED1;
          border-width: 10px;
          margin-top: -10px;
        }
        &:before {
          border-color: rgba(65, 131, 196, 0);
          border-left-color: $border-color;
          border-width: 11px;
          margin-top: -11px;
        }
      }
    }
  }

  div.translation_edit_container {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
    textarea {
      height: 10rem;
      resize: none;
      width: 100%;
      padding: 20px;
      border: 0;
      border-top: 1px solid $border-color;
      border-bottom: 1px solid $border-color;
      background: #fff;
      color: #999999;
      font-size: 21px;
      line-height: 1.6em;
      resize: none;
      -moz-transition: color 0.15s ease-in 0;
      -webkit-transition: color 0.15s ease-in 0;
      transition: color 0.15s ease-in 0;
      box-shadow: none;
    }
    button {
      margin-top: 1rem;
    }
  }
}