import { css } from 'lit';

export default css`
:host {
  display: contents;
}

dialog{
  max-width: 640px;
  width: 100%;
}

.autocomplete {
  position: relative;
  box-sizing: content-box;
}

.suggestions {
  position: fixed;
  z-index: 100;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 120ms cubic-bezier(0.4, 0, 0.6, 1);
  background-color: var(--md-sys-color-surface);
  box-shadow: var(--md-sys-elevation-1);
  border-radius: 0 0 8px 8px;

  display: flex;
  flex-direction: column;
}

.suggestions.opened {
  transform: scaleY(1);
}

.user-name {
  margin: 0;
  width: 100%;
}

.input-line {
  display: flex;
  align-items: center;
}

.name-input {
  flex: 1;
}

.input-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background: #f1f3f4;
  border-bottom: 1px solid;
  border-radius: 6px 6px 0 0;
  padding: 0 12px;
  margin-right: 8px;
  align-items: center;
}

.input-wrapper:focus-within {
  border-bottom-color: var(--accent-color);
}

.input-wrapper input {
  height: 41px;
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
}

.input-wrapper ui-chip {
  margin-right: 8px;
}

.current-users {
  margin-top: 20px;
}

.permission-item {
  display: flex;
  align-items: center;
  height: 52px;
}

.user-icon {
  margin-right: 12px;
}

.permission-user {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.user-role-selector {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  text-transform: capitalize;
}

.roles-list {
  min-width: 320px;
  padding: 8px 0;
  border-radius: 8px;
}

.role-item {
  text-transform: capitalize;
}

.list-separator {
  height: 1px;
  background-color: rgba(35, 47, 52, 0.12);
  margin: 4px 0;
}

.pending-info {
  margin-right: 12px;
  font-family: var(--md-sys-typescale-body-medium-font-family-name);
  font-style: var(--md-sys-typescale-body-medium-font-family-style);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}
`;
