@import 'variables';

.list-group-item .column-list-item {
  padding: 16px 24px;

  .column-header {
    display: flex;
    height: 38px;

    .column-details {
      flex-basis: 50%;
      flex-grow: 1;
      padding-right: 16px;
    }

    .resource-type,
    .badges,
    .actions {
      display: flex;
      align-items: center;
    }

    .resource-type {
      flex-basis: 100px;
    }
    .badges {
      // placeholder
    }
    .actions {

      .column-dropdown {
        &.open {
          background-color: $body-bg-tertiary;

          .icon {
            background-color: $icon-bg-dark;
          }
        }

        .dropdown-toggle {
          border: none;
          border-radius: 4px;
          height: 32px;
          width: 32px;
          padding: 4px;

          .icon {
            background-color: $icon-bg;
            height: 22px;
            -webkit-mask-size: 22px;
            mask-size: 22px;
            width: 22px;
            margin: 0;
          }

          &:hover,
          &:focus {
            background-color: $body-bg-secondary;

            .icon {
              background-color: $icon-bg-dark;
            }
          }
        }
      }
    }
  }

  .expanded-content {
    margin-top: -16px;
  }

  .stop-propagation {
    cursor: default;
  }
}
