@import "../scss/variables";

.admin-pill-nav {
  width: 250px;
  flex-shrink: 0;
  margin-right: 30px;

  &.solid {
    > .nav-item {
      background-color: #fff;
      border: 1px solid $site-border-color-200;
    }
  }

  &.with-actions {
    .name {
      width: 90%;
    }

    .actions {
      width: 10%;
      color: $icon-color-dark;
      position: absolute;
      right: 5px;
      top: 9px;
    }
  }

  &.rounded {
    > .nav-item {
      border-radius: 3px;
    }
  }

  > .nav-item {
    display: block;
    padding: 10px 15px;
    cursor: pointer;
    text-transform: capitalize;
    white-space: nowrap;
    margin-bottom: 5px;
    color: $site-text-color-400;
    position: relative;

    > .name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:hover {
      background-color: darken($site-bg-color-200, 1%);
    }

    &.selected {
      background-color: $site-accent-color;
      color: $accent-text-color;
      border-color: $site-accent-color;

      > .actions {
        color: $accent-text-color;
      }
    }
  }
}