import { css } from 'lit'

export default css`
  :host {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  p {
    margin: 0;
  }

  .people-with-access {
    max-height: var(--filesystem-share-file-list-max-height, initial);
    overflow-y: auto;
    flex: 1 1 auto;
  }

  .immutable-permission {
    color: var(--md-sys-color-on-surface-variant);
  }

  .grant-type-input {
    min-width: 140px;
  }

  .share-input {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    .autocomplete {
      display: block;
      flex-grow: 1;
      min-height: 56px; /* min height of the select */
    }

    .input-container {
      min-height: inherit;
      height: 100%;
      border: none;
      padding: 4px 12px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      box-sizing: border-box;
      gap: 4px;
      border-radius: 4px;
      background-color: var(--md-sys-color-surface-container-lowest);

      outline-color: var(--md-sys-color-primary);
      outline-style: solid;
      outline-width: 1px;
      outline-offset: -1px;
      transition:
        outline-width 0.14s ease-in-out,
        outline-offset 0.14s ease-in-out;

      &:focus-within {
        outline-width: 3px;
        outline-offset: -3px;
      }

      .native-input {
        min-height: 32px; /* The same as the chip */
        flex: 1;
        outline: none;
        border: none;
        background: transparent;
        color: var(--md-sys-color-on-surface);
        font-size: 1rem;
        font-family: var(--md-sys-typescale-body-large-font-family);
        line-height: var(--md-sys-typescale-body-large-line-height);
        padding: 0;
      }
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin: 0;
      padding: 0;
    }
  }

  .permission-item {
    &.removed {
      opacity: 0.74;

      .permission-user-name,
      .permission-user-email {
        text-decoration: line-through;
      }
    }
  }
`
