.ag-grid-view-list {
  >div>div:not(:last-child) {
    border-bottom: 1px solid $gray-light;
  }

  .ag-grid-view-element {
    $base: unquote(".ag-grid-view-element");
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    min-height: 47px;
    margin: 5px 0;

    &.current-view {
      //background-color: $primary;
      background-color: rgba($primary, 0.1);
      border-radius: 5px;

      .ag-grid-view-element__visibility {
        color: $primary;
      }

      >div:nth-child(2) {
        >ui-button {
          .ui-btn__icon {
            //color: $white;
          }

          &:hover {
            //background-color: rgba($primary, 0.5) !important;
          }
        }
      }
    }

    >div:first-child {
      flex-grow: 1;
    }

    .divider {
      background-color: $navbar-separator-color;
    }

    &:hover {
      //background-color: rgba($primary, 0.5);
      background-color: rgba($primary, 0.1);
      border-radius: 5px;

      .ag-grid-view-element__name {
        //color: $primary;
      }

      >div:nth-child(2) {
        visibility: visible;
      }
    }

    >div {
      padding: 5px 10px;
    }

    &__name {
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      color: $black-100;
    }

    &__visibility {
      padding: 2px 0px;
      font-weight: 400;
      font-size: 12px;
      line-height: 15px;
      color: $primary;
    }

    >div:nth-child(2) {
      >ui-button {
        border: none;
        background-color: transparent !important;
        transition: none !important;

        .ui-btn__icon {
          //color: $primary;
        }

        .ui-btn__inner {
          box-shadow: none;
        }

        .ui-btn {
          //background-color: inherit;
        }

        &:hover {
          //background-color: rgba($primary, 0.5) !important;
        }

        &:active {
          .ui-btn {
            box-shadow: none;
          }
        }
      }
    }
  }
}