@import 'variables/gutters';

.avrop-row {
  position: relative;
  display: grid;
  padding: var(--digi--layout--gutter);
  background-color: var(--digi--ui--color--background--secondary);
  grid-template-columns: auto repeat(4, 1fr);
  gap: var(--digi--layout--gutter) $digi--layout--gutter--l;
  grid-template-areas:
    'select name start translator level'
    'select tjanst end address handledare';

  &--locked {
    grid-template-columns: repeat(4, 1fr) 7.5rem;
    grid-template-areas:
      'name start translator level delete'
      'tjanst end address handledare delete';
  }

  &__select {
    grid-area: select;
    margin-right: var(--digi--layout--gutter);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__name {
    grid-area: name;
  }
  &__tjanst {
    grid-area: tjanst;
  }
  &__start {
    grid-area: start;
  }
  &__end {
    grid-area: end;
  }
  &__translator {
    grid-area: translator;
  }
  &__address {
    grid-area: address;
  }
  &__level {
    grid-area: level;
  }
  &__handledare {
    grid-area: handledare;
  }
  &__delete {
    grid-area: delete;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }
}

.avrop-row__close-btn {
  position: absolute;
  top: 0;
  right: 0;

  ::ng-deep {
    button {
      padding: 0.5rem 0.75rem !important;
    }
  }
}

.avrop-row__checkbox {
  margin-top: 1.5rem;
}

.avrop-row__data-row {
  display: flex;
  flex-direction: row;
  gap: $digi--layout--gutter--xl $digi--layout--gutter--l;
  flex-grow: 1;
}

.avrop-row__data-column {
  display: flex;
  flex-direction: column;
  gap: $digi--layout--gutter--l 0;
  flex-grow: 1;
}

.avrop-row__data-column--bottom-align {
  justify-content: flex-end;
}

.avrop-table__label {
  display: block;
}
