.story-container {
  .Story {
    padding: 7px 8px;
    border-bottom: 1px solid $story-border-bottom-color;
    border-top: 1px solid $story-border-top-color;
    -webkit-transition: background-color ease-in-out .2s;
    -o-transition: background-color ease-in-out .2s;
    transition: background-color ease-in-out .2s;

    &--late-release {
      background-color: rgba($darkred, .5) !important;
      border-top-color: rgba($darkred, .6) !important;
      border-bottom-color: rgba($darkred, .1) !important;
      color: $white;
    }

    &--highlighted {
      background-color: $story-background-highlight-color !important;
    }

    &--accepted {
      background-color: $story-background-accepted-color !important;
    }

    &--collapsed {
      display: flex;
      justify-content: space-between;
      background-color: $story-background-color;
      min-height: 37px;
      cursor: move;
      align-items: center;
      font-size: 12px;

      &:hover {
        background-color: $story-hover-background-color;
      }

      &.Story--unestimated {
        font-style: italic;
      }

      &.Story--release {
        color: $white;
        background-color: $blue-4;
        border-top-color: $blue-5;
        border-bottom-color: $blue-3;

        abbr {
          color: $white;
        }

        &:hover {
          background-color: $blue-3;
        }

        .Story__icon {
          color: $blue-4;
        }
      }

      &.Story--accepted {
        color: $darkgrey-3;
      }

      &.Story--isDragging {
        opacity: 0.8;
      }

      &.Story--cantBeMoved {
        cursor: pointer;
      }

      .Story {
        &__description-icon {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-left: 5px;
        }

        &__info {
          flex: 1;
          display: flex;
          flex-direction: column-reverse;
          justify-content: space-between;
          margin: 0 10px;
        }

        &__icons-block {
          display: flex;
          width: 60px;
        }

        &__focus-button {
          width: 13px;
          height: 21px;
          position: relative;
        }

        &__focus-button-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform:translate(-50%,-50%);
        }

        &__icon {
          display: flex;
          align-items: center;
          margin-right: 5px;
        }

        &__title {
          word-break: break-word;
          display: flex;
          justify-content: space-between;
          text-align: justify;

          abbr {
            min-width: 25px;
            border: none;
          }

          span {
            min-width: 55px;
            margin-left: 10px;
          }
        }

        &__actions {
          display: flex;
          align-items: center;
        }

        &__estimated-value {
          padding: 2px 3px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: $estimated-background-color;
          margin-right: 1px;
          border: 1px solid $estimated-border-color;
          border-radius: 3px;
          line-height: 1;
          min-width: 15px;
          font-style: normal;
        }

        &__estimate-box {
          display: inline
        }

        &__estimate {
          padding: 2px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-right: 1px;
          line-height: 1;
          font-weight: bold;
          color: $estimate-background-color;
          cursor: pointer;
          font-style: normal;
        }

        &__label {
          text-align: left;
          color: $story-label-color;
          text-decoration: none;
          font-style: normal;
          margin-right: 5px;

          &:hover {
            text-decoration: underline;
          }
        }

        &__labels {
          color: $story-labels-color;
          font-size: 84%;
          margin-top: 1px;
        }

        &__btn {
          @extend .btn;
          @extend .btn-xs;
          font-size: 11px;
          display: inline;

          &--start {
            @extend .btn-default;
          }
          &--finish {
            @extend .btn-primary;
          }
          &--deliver {
            @extend .btn-warning;
          }
          &--accept {
            @extend .btn-success;
          }
          &--reject {
            @extend .btn-danger;
          }
          &--restart{
            @extend .btn-danger;
            background-image: sprite-url($icons-sprites);
            background-position: sprite-position($icons-sprites, redo, 0, 2px);
            background-repeat: no-repeat;
            padding-left: 20px;
          }

          &--release{
            @extend .btn-default;
          }
        }

        &__initials {
          color: green;
          font-weight: bold;
          margin-left: 1em;
          font-style: normal;
        }
      }
    }

    &--expanded {
      padding: 8px 10px;
      background-color: $butter-2;
      color: $aluminium-6;
      position: relative;

      .Story {
        &__flex {
          display: flex;
        }

        &__section-title {
          font-size: 12px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        &__section {
          margin: 5px 5px 5px 0;

          &__notes {
            .delete-note-button {
              margin-left: 5px;
              color: $link-primary;
              text-decoration: none;

              &:hover, &:focus {
                color: $link-hover;
                cursor: pointer;
                text-decoration: underline;
                outline: 0;
              }
            }

            .create-note-button {
              margin-bottom: 5px;
              text-align: right;

              input {
                @extend .btn;
                @extend .btn-default;
                @extend .btn-xs;
              }
            }

            .create-note-text {
              resize: vertical;
              margin: 10px 0;
              min-height: 30px;
            }
          }

          &__tasks {
            .task label {
              min-height: 20px;
              padding-left: 20px;
              margin-bottom: 1px;
              font-weight: normal;
              cursor: pointer;
            }

            .task input[type="checkbox"] {
              position: absolute;
              margin-left: -20px;
              margin-top: 4px \9;
            }

            .list-task {
              font-size: 12px;
              position: relative;
            }

            .task-form {
              @extend .clearfix;
            }

            .add-task-button {
              @extend .btn;
              @extend .btn-default;
              @extend .btn-xs;
              @extend .pull-right;
              margin-top: 10px;
            }
          }

          &__description {
            .story-description-content {
              cursor: text;
            }

            .edit-description-button {
              font-size: 12px;
              border-radius: 5px;
              background-color: $lightgrey-12;
              border-color: $darkgrey-11;
              border-width: 1px;
              outline: none;
              color: $aluminium-6;
            }

            .edit-description-text {
              resize: vertical;
              min-height: 100px;
              background-color: #fff;

              &__input {
                @extend .form-control;
              }

              &__suggestions {
                position: absolute !important;
                background: $blue-6 !important;
                color: $white !important;
                left: 15px !important;
                padding: 5px 10px 5px 10px !important;
                top: 7px !important;

                &:hover {
                  background: $blue;
                }
              }
            }
          }
        }

        &__controls {
          @extend .btn-group;

          height: 22px;
          display: block;

          input {
            @extend .btn;
            @extend .btn-default;
            @extend .btn-xs;
          }

          .infoToolTip {
            height: 22px;
            cursor: default;
            float: right;
          }
        }

        &__loading {
          background: black;
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 3;
          opacity: 0.3;
          display: none;
        }
      }
    }

    &__enable-loading {
      cursor: wait;
      border-top: 0;
      border-bottom: 0;

      .Story__loading {
        display: block;
      }
    }
  }
}
