@import "variables.scss";

.list > button {
  padding: 3px 10px;
  text-decoration: none;
  user-select: none;
  z-index: 1;

  @include themify($themes) {
    color: themed("textColor");
    background-color: themed("listItemBackgroundColor");
  }

  &:after {
    content: "";
    display: table;
    clear: both;
  }

  &:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: calc(100% - 10px);
    border-bottom: 1px solid #000000;

    @include themify($themes) {
      border-bottom-color: themed("listItemBorderColor");
    }
  }

  &:last-child:before {
    border: none;
    height: 0;
  }

  &:hover,
  &:focus,
  &.active {
    @include themify($themes) {
      background-color: themed("listItemBackgroundHoverColor");
    }
  }

  &.active {
    border-left: 5px solid #000000;
    padding-left: 5px;

    @include themify($themes) {
      border-left-color: themed("primaryColor");
    }
  }

  &:focus:not(.active) {
    border-left: 5px solid #000000;
    padding-left: 5px;

    @include themify($themes) {
      border-left-color: themed("mutedColor");
    }
  }

  .text,
  .detail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;

    @include themify($themes) {
      color: themed("textColor");
    }
  }

  .detail {
    font-size: $font-size-small;

    @include themify($themes) {
      color: themed("mutedColor");
    }
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    height: 36px;
    width: 34px;
    margin-left: -5px;

    @include themify($themes) {
      color: themed("mutedColor");
    }

    img {
      border-radius: $border-radius;
      max-height: 20px;
      max-width: 20px;
    }
  }
}

.list > button.flex-list-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;

  .item-icon {
    display: block;
    margin-left: -5px;
    margin-right: 4px;
    @include themify($themes) {
      color: themed("mutedColor");
    }
  }

  .item-content {
    display: block;
    .item-title {
      display: block;
      .title-badges {
        @include themify($themes) {
          color: themed("mutedColor");
        }
      }
    }

    .item-details {
      font-size: $font-size-small;
      @include themify($themes) {
        color: themed("mutedColor");
      }
    }
  }

  .flex-cipher-list-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    > * {
      text-align: left;
    }
  }
}