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

.StylePopup {
  display: flex;
  flex-direction: column;
  width: 256px;
  border-radius: 4px;
  overflow: auto;
  box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .14);
  z-index: 80;
  user-select: none;
  
  &:empty {
    box-shadow: none;
  }

  @include mobile {
    width: 100%;
    border-radius: 0;
  }

  & > * {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, .54)
  }

  .colors-container {
    background-color: #fafafa;
    box-shadow: inset 0px -1px rgba(0, 0, 0, .12);
    border-collapse: separate;
    
    .inner-wrapper {
      margin: 16px;
      
      @include mobile {
        margin-top: 12px;
      }

      &:empty {
        margin: 0;
      }
    }
  }

  .sliders-container {
    background-color: $white;

    .sliders {
      display: grid;
      grid-template-columns: auto 1fr 33px;
      grid-auto-rows: 32px; 
      grid-column-gap: 5px;
      align-items: center;
      margin: 12px 16px;
      overflow: hidden;
      
      @include mobile {
        grid-auto-rows: 48px;
      }

      &:empty {
        margin: 0;
      }
    }
  }   
}
