skottie/modules/skottie-file-settings-sk/skottie-file-settings-sk.scss

@import '../../../elements-sk/modules/colors';

skottie-file-settings-sk {
  .wrapper {
    width: 100%;
    padding: 8px;

    #wrapper-form {
      font-size: 0;
    }

    .text-box {
      display: inline-flex;
      width: 110px;
      align-items: baseline;
      background-color: var(--surface-2dp);
      border-radius: 4px;
      gap: 8px;
      padding: 4px;
      margin-top: 8px;

      &__left {
        border-radius: 4px 0 0 4px;
      }

      &__right {
        border-radius: 0 4px 4px 0;
      }

      &--label {
        display: inline-block;
      }

      &--input {
        flex: 1 1 auto;
        min-width: 0;
        border: none;
      }

      &--info {
        display: inline;
        flex: 0 0 auto;
        font-size: 14px;
        width: 20px;
        position: relative;

        &--tooltip {
          width: max-content;
          max-width: 300px;
          background-color: var(--surface);
          border-radius: 6px;
          color: var(--disabled);
          margin: 0 0 0 8px;
          text-align: center;
          padding: 8px;
          visibility: hidden;
          position: absolute;
          left: 0;
          top: 100%;
          z-index: 1;
          transform: translate(-50%, 6px);
        }

        &:hover .text-box--info--tooltip {
          visibility: visible;
        }
      }
    }

    .aspect-ratio {
      display: inline-block;
      width: 30px;
      margin-left: 4px;
      vertical-align: bottom;

      button {
        padding: 5px;
      }

      svg.icon-sk-svg {
        width: 100%;
        height: 100%;
        fill: var(--on-surface);
        stroke: var(--on-surface);
      }
    }

    .toolbar {
      width: 100%;
      display: flex;
      justify-content: end;
    }
  }
}