@import '../../../../scss/styles';

@layer payload-default {
  .inline-block-container {
    display: inline-block;
    margin-right: base(0.2);
    margin-left: base(0.2);
  }

  .inline-block.inline-block-not-found {
    max-width: calc(var(--base) * 20);
    color: var(--theme-error-500);
  }

  .inline-block {
    @extend %body;
    @include shadow-sm;
    padding: base(0.1);
    padding-inline-start: base(0.4);
    display: flex;
    align-items: center;
    background: var(--theme-input-bg);
    outline: 1px solid var(--theme-elevation-100);
    border-radius: $style-radius-s;
    max-width: calc(var(--base) * 15);
    font-family: var(--font-body);

    &::selection {
      background: transparent;
    }

    &:hover {
      outline: 1px solid var(--theme-elevation-150);
    }

    &__wrap {
      flex-grow: 1;
      overflow: hidden;
    }

    &__editButton.btn {
      margin: 0;
    }

    &__editButton {
      &:disabled {
        color: var(--theme-elevation-300);
        pointer-events: none;
      }
    }

    &__actions {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      margin-left: base(0.4);

      & > .btn {
        width: base(1);
        height: base(1);

        &:not(:disabled):hover {
          background: var(--theme-elevation-100);
        }

        & > * {
          height: 100%;
        }
      }

      svg {
        width: 16px;
        height: 16px;
      }
    }

    &__removeButton.btn {
      margin: 0;

      line {
        stroke-width: base(0.2);
      }

      &:disabled {
        color: var(--theme-elevation-300);
        pointer-events: none;
      }
    }
  }
}
