@import '../../../styles/utils/button-reset';

@layer kz-components {
  .grid {
    display: grid;
    grid-template-columns: repeat(6, 150px);
    grid-template-rows: min-content;
    gap: var(--spacing-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .button {
    @include button-reset;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-8);
    padding: var(--spacing-16);
    width: 100%;
    height: 100%;
    background-color: var(--color-gray-100);
    border-radius: var(--border-solid-border-radius);
    word-break: break-all;
    cursor: pointer;

    &:hover {
      background-color: var(--color-gray-200);
    }
  }

  .copiedTag {
    margin: auto;
  }

  .icon {
    margin-bottom: var(--spacing-8);
  }

  .tag {
    border: 1px solid var(--color-green-500);
  }
}