@use 'apps/dashboard/src/variables' as *;

:host {
  display: block;
}

.add-synonyms {
  align-items: center;
  display: flex;
  gap: rhythm(2);
  margin-top: rhythm(2);

  .main-word-input {
    min-width: rhythm(16);
  }
  .synonyms-input {
    flex: 1 0 auto;
    margin-right: rhythm(3);
    min-width: rhythm(35);
  }

  pa-button {
    margin-left: rhythm(5);
  }
}

.table-container {
  margin-top: rhythm(8);

  .edit-synonym-input {
    background: none;
    box-shadow: inset 0 -1px 0px $color-neutral-light;
    border: none;
    width: 100%;
  }

  .action-buttons-container {
    display: flex;
    gap: rhythm(0.5);
    padding-right: rhythm(1);
    opacity: 0;
    transition: opacity $transition-hint;

    &.visible {
      opacity: 1;
    }
  }

  pa-table-row.pa-selected ::ng-deep .pa-table-grid--row .pa-table-grid--cell {
    background: $color-neutral-lightest;
  }
}

@media (min-width: $size-viewport-xlarge-min) {
  :host {
    padding-right: rhythm(32);
  }

  .add-synonyms {
    .synonyms-input {
      margin-right: rhythm(5);
    }
    pa-button {
      margin-left: rhythm(7);
    }
  }
}
