/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 @import '../../modules/shared/variables';

 @current-history-item-hover-color: @unknown-color;
 @current-history-item-highlight-color: @form-success-color;

 :host {
  /deep/ menu-button .item-label-text {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    &:first-letter {
      text-transform: uppercase;
    }
  }

  .history-menu {
    /deep/ ul {
      li:not(.selection-all) {
        margin: 0;
        overflow: hidden;
        position: relative;
        transition: background-color 300ms ease-in, opacity 300ms ease-in, height 100ms 400ms ease-in;
        &:before {
          border-left: 1px solid darken(@unknown-color, 25%);
          bottom: 0;
          content: "";
          display: block;
          left: 12px;
          position: absolute;
          top: 0;
        }
        &:after {
          background: #fff;
          border: 1px solid darken(@unknown-color, 25%);
          border-radius: 100%;
          content: "";
          height: 12px;
          left: 7px;
          position: absolute;
          top: 6px;
          transition: background-color 300ms;
          width: 12px;
        }

        .list-item-label.label-container {
          border-radius: 3px;
          display: flex;
          margin: 0 3px 0 25px;
          padding: 3px 25px 3px 1em;
          .item-label-text {
            flex-grow: 1;
            padding-right: 1em;
          }
          /deep/ history-item-controls {
            float: none;
            justify-self: right;
          }
        }

        &.active > a, &:hover {
          color: #262626;
          text-decoration: none;
          background-color: transparent;
          .list-item-label.label-container {
            background-color: #f5f5f5;
          }
        }
        &.initial {
          color: @unknown-color;
        }
      }
      li:not(.selection-all):first-child {
        &:before {
          top: 50%;
        }
      }
      li:not(.selection-all):last-child {
        &:before {
          bottom: 50%;
        }
      }
      li:not(.selection-all):hover {
        &:after {
          background: @current-history-item-hover-color;
        }
      }
      li:not(.selection-all).active {
        &:after {
          background: @current-history-item-highlight-color;
        }
      }
    }
  }

 }
