@st-namespace 'Event-st-css';
@st-import [ --wix-color-4, --wix-color-5, --wix-color-8 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, setFont, setColor ] from '../../common/formatters.st';
@st-import ButtonNext from '../internal/WixUiCoreComponents/components/CoreButtonNext/CoreButtonNext.st.css';

/*
 * Time font
 * @type font
 */
@property st-global(--wix-ui-tpa-event-time-font);

/*
 * Time color
 * @type color
 */
@property st-global(--wix-ui-tpa-event-time-color);

/*
 * Title font
 * @type font
 */
@property st-global(--wix-ui-tpa-event-title-font);

/*
 * Title color
 * @type color
 */
@property st-global(--wix-ui-tpa-event-title-color);

/*
 * Fullday background color
 * @type color
 */
@property st-global(--wix-ui-tpa-event-fullday-bg-color);

/*
 * Overlay color
 * @type color
 */
@property st-global(--wix-ui-tpa-event-hover-overlay-color);

/*
 * Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-event-bg-color);

/*
 * Selected overlay color
 * @type color
 */
@property st-global(--wix-ui-tpa-event-selected-overlay-color);

.root {
    -st-states: selected, fullday;
    position: relative;
    background-color: createColor(--wix-ui-tpa-event-bg-color, '0, 0, 0, 0');
    display: flex;
    align-items: center;
}

.root::before {
    content: '';
    flex: 0 0 12px;
}

.root::after {
    content: '';
    flex: 0 0 4px;
}

.buttonContainer {
    -st-extends: ButtonNext;
    width: 100%;
    padding: 0;
    background: createColor(--wix-ui-tpa-event-bg-color, '0, 0, 0, 0');
    border: none;
}

.buttonContainer::content {
    width: 100%;
}

.overlay {
    display: none;
    background: createColor(--wix-ui-tpa-event-hover-overlay-color, var(--wix-color-5), 0.06);
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.root:hover .overlay {
    display: block;
}

.root:selected .overlay{
    display: block;
    background: createColor(--wix-ui-tpa-event-selected-overlay-color, var(--wix-color-8), 0.1);
}

.root:fullday {
    background: createColor(--wix-ui-tpa-event-fullday-bg-color, var(--wix-color-8));
}

.time {
    -st-mixin:
		setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-event-time-font, 'Body-M', '{ "line-height": "1", "size": "14px" }'),
		setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-event-time-color, var(--wix-color-4));
    display: flex;
    padding-top: 4px;
    padding-bottom: 4px;
}

.time::after {
    content: ' ';
    width: 2px;
    height: 100%;
    display: inline-block;
}

.title {
  -st-mixin:
		setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-event-title-font, 'Body-M', '{ "line-height": "1", "size": "14px" }'),
		setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-event-title-color, var(--wix-color-5));
    display: inline;
    padding-top: 4px;
    padding-bottom: 4px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* st-namespace-reference="../../../../src/components/Event/Event.st.css" */