@import 'utilities';
@import 'layout';

/* In this file you can add custom styling for your Streamlit app.
* Either use the general style placeholders such as `%sal-button` or
* create new style blocks using the selector utilities.
*/

%sal-button-container {
  // [st.button] Container styles
  // TODO Remove after documentation tasks APP-2775/APP-2789
  padding: 0 20px;
}

%sal-button {
  // [st.button] Button styles
  // TODO Remove after documentation tasks APP-2775/APP-2789
  border-radius: 5px;
  border-color: pink;
  color: pink;
}

// Example custom class TODO Remove after documentation tasks APP-2775/APP-2789
%button-large {
  font-size: large;
  font-weight: bold;
  padding: 20px;
  border: 3px solid black;
}

// Example custom class TODO Remove after documentation tasks APP-2775/APP-2789
%button-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

// Example custom class TODO Remove after documentation tasks APP-2775/APP-2789
%sal-write {
  color: blue;
}

// Example custom class TODO Remove after documentation tasks APP-2775/APP-2789
%sal-metric-label {
  color: lawngreen;
}

// Example custom class TODO Remove after documentation tasks APP-2775/APP-2789
%flex-row {
  flex-direction: row;

  div {
    // Most streamlit components add width values as inline style. Make it fit the content.
    width: fit-content !important;
  }

}

// Example custom class TODO Remove after documentation tasks APP-2775/APP-2789
%justify-center {
  justify-content: center;
}

// Example custom class TODO Remove after documentation tasks APP-2775/APP-2789
%justify-end {
  justify-content: flex-end;
}

/* Add new custom classes under the respective `sal-` component name key here.
*  They will be compiled into the final stylesheet.
*  Utility classes that are intended for multiple types of components need to be
*  added to every component they can apply to.
 */
$custom-classes: (
  sal-button: (button-disabled, button-large),
  sal-column: (justify-center, justify-end),
  sal-columns-column-contents: (flex-row),
);

// Do not modify or move this final import!
@import 'style-builder';
