/* campaignmonitor.st.css  */
@namespace "CampaignMonitor";

/* = Project info and vars */
:import {
  -st-from: "./project.st.css";
  -st-default: Base;
  -st-named:
    tablet,
    --spacing-unit,
    --color-accent-1,
    --color-ui-inverse,
    --color-heading,
    --color-label,
    --font-family-base,
    --base-font-size,
    --base-font-size-xl,
    --border-radius-lg,
    --background-hover-color,
    --svg-input-number;
}

/* Import style API */
:import {
  -st-from: "../../components/CampaignMonitor/campaignmonitor.st.css";
  -st-default: CampaignMonitor;
}

:import {
  -st-from: "../../components/Body/body.st.css";
  -st-default: Body;
}

/* Mixins */
:import {
  -st-from: "../../mixins/buttonMixin.st.css";
  -st-default: ButtonMixin;
  -st-named:
    --bg-color,
    --text-color;
}

:import {
  -st-from: "../../mixins/labelMixin.st.css";
  -st-default: LabelMixin;
}

:import {
  -st-from: '../../mixins/formElements.st.css';
  -st-named: formInputText,
    formInputFocus,
    formInputHover,
    /* Checkbox */
    formInputCheckbox,
    formInputCheckboxChecked,
    /* Radio */
    formInputRadio,
    formInputRadioChecked,
    /* Select */
    formSelect;
}

:import {
  -st-from: "../../mixins/hideWebkitAppearance.st.css";
  -st-named: hideWebkitAppearance;
}

:import {
  -st-from: "../../mixins/boxShadowFocus.st.css";
  -st-default: BoxShadowFocus;
}

/* Base Form */
@st-scope Base {
  CampaignMonitor {
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
    margin-bottom: calc(var(--spacing-unit) * 3);
  }

  /* H1 looks like Title2 */
  CampaignMonitor h1 {
    color: var(--color-heading);
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: calc(var(--spacing-unit) * 2);
  }

  /* Reset the fieldsets */
  CampaignMonitor fieldset {
    margin: 0 0 calc(var(--spacing-unit) * 4);
    padding: 0;
    border: none;
  }

  /* All labels are Title5 */
  CampaignMonitor label {
    -st-mixin: LabelMixin(text-color var(--color-label), text-size var(--base-font-size-xl), line-height 1.1);
    display: block;
    margin-bottom: 12px;
  }

  CampaignMonitor form > div > div {
    display: flex;
    flex-direction: column;
  }

  CampaignMonitor fieldset div {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-unit);
  }

  /* Input font size, labels beside checkboxes */
  CampaignMonitor fieldset div label {
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
    margin: 0;
  }

  CampaignMonitor select,
  CampaignMonitor input {
    -st-mixin: formInputText;
  }

  /* Checkboxes */
  CampaignMonitor fieldset input[type="checkbox"] {
    -st-mixin: formInputCheckbox;
  }

  /* Radios */
  CampaignMonitor fieldset input[type="radio"] {
    -st-mixin: formInputRadio;
  }

  /* Apply hover style to input elements and labels */
  CampaignMonitor fieldset div label:hover,
  CampaignMonitor fieldset input[type="checkbox"]:hover,
  CampaignMonitor fieldset input[type="radio"]:hover {
    -st-mixin: formInputHover;
  }

  CampaignMonitor select:focus,
  CampaignMonitor input:focus {
    -st-mixin: formInputFocus;
  }
}

/* Select box and input styling */
@supports (-webkit-appearance:none) {
  @st-scope Base {
    CampaignMonitor select {
      -st-mixin: formSelect;
    }

    /* Firefox has a problem with this if we hide it is no longer clickable */
    CampaignMonitor input[type=number]::-webkit-inner-spin-button,
    CampaignMonitor input[type=number]::-webkit-outer-spin-button {
      /* Hide the default appearance */
      -st-mixin: hideWebkitAppearance;
      margin: 0;
      height: 40px;
      width: 20px;
      cursor: pointer;
    }

    /* Icons from feathericons.com */
    CampaignMonitor input[type=number] {
      /* @TODO replace with a mixin */
      /* Hide the default appearance */
      -st-mixin: hideWebkitAppearance;
      background: var(--svg-input-number) right no-repeat;
      background-color: var(--color-ui-inverse);
      background-position: 100% 50%;
      background-position: right 10px top 50%;
      background-size: 20px 20px;
    }

    /* Radio and Checkbox focus state */
    CampaignMonitor input[type=checkbox]:focus,
    CampaignMonitorinput[type=radio]:focus {
      -st-mixin: BoxShadowFocus;
    }

    CampaignMonitor input[type=radio]:checked {
      -st-mixin: formInputRadioChecked;
    }

    /* Icons from feathericons.com */
    CampaignMonitor input[type=checkbox]:checked {
      -st-mixin: formInputCheckboxChecked;
    }
  }
}

@st-scope Base {

  /* Use the mixin to mimic our primary button. */
  CampaignMonitor button {
    /* Base button styles. */
    -st-mixin: ButtonMixin(border-radius var(--border-radius-lg));
    /* Manually apply color properties to match the color combo we want. */
    --bg-color: var(--color-accent-1);
    --text-color: var(--color-ui-inverse);
  }

  CampaignMonitor button:hover:not(:disabled),
  CampaignMonitor button:focus:not(:disabled) {
    background-color: var(--background-hover-color);
  }

  /* DataProtection is injected and wrapped in Body component */
  CampaignMonitor Body {
    display: block;
  }

  CampaignMonitor::dataProtection {
    margin-bottom: calc(var(--spacing-unit) * 3);
  }
}

/** Medium devices (tablets, 950px and up) */
@media value(tablet) {
  @st-scope Base {

    /* Title2 font size */
    CampaignMonitor h1 {
      font-size: 2.5rem;
      margin-bottom: calc(.45em + var(--spacing-unit));
    }

    /* Title5 */
    CampaignMonitor label {
      margin-bottom: 16px;
    }

    /* Input font size checkbox labels */
    CampaignMonitor fieldset div label {
      font-size: 1rem;
    }

    CampaignMonitor select {
      padding: 18px;
      margin-bottom: calc(var(--spacing-unit) * 6);
    }

    CampaignMonitor button {
      font-size: var(--base-font-size-md);
    }
  }
}