@import "../../../style/mixin.scss";

@include export-module('co-model-list-item-layout') {
  .co-model-list-item {

    .model-item-container {
      box-sizing: border-box;
      padding: 10px;
      border: 1px solid var(--co-model-list-item-border-color);
      border-radius: var(--co-model-list-item-border-radius);


      .header-collapsable {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header {
          font-size: var(--co-inphoto-font-size-base);
          font-weight: 600;
        }

        .header-icon {
          display: none;
        }

        .header-icon-show {
          display: block;
        }
      }

      .collapsable-container {
        height: 0;

        overflow: hidden;
        transition: height 0.3s ease-in-out;
      }

      .collapsable-container.active {
        height: auto;
        min-height: 100px;
      }

      .slider-container {
        width: 100%;
        display: flex;
        justify-content: space-between;

        input {
          min-width: 70%;
        }
      }

      .buttons {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        align-items: center;

        .button-configure {
          @include primary-button;
        }
        .button-remove {
          @include secondary-button;
        }
      }
    }
  }
}
