// Check Boxes: checkboxes and radios are 24x24px
.check-box,
.radiobutton {
  StBin {
    width: 20px;
    height: 20px;
  }
}

// Switches: toggle-switches are 48x26px
.toggle-switch {
  width: 48px;
  height: 26px;
}

// Calendar
.calendar-day-base {
  border-radius: 999px;
}

// arrow back
.calendar-change-month-back {

  &:hover,
  &:focus {
    background-color: $hover_bg_color;
    border-radius: 10px;
  }

  &:active {
    background-color: $active_bg_color;
    border-radius: 10px;
  }
}

// arrow forward
.calendar-change-month-forward {

  &:hover,
  &:focus {
    background-color: $hover_bg_color;
    border-radius: 10px;
  }

  &:active {
    background-color: $active_bg_color;
    border-radius: 10px;
  }
}

// Fix for close assets 
.workspace-close-button,
.window-close {
  background-image: url("#{$asset_path}/misc/close.svg");
  background-size: 24px;
  height: 24px;
  width: 24px;

  &:hover {
    background-image: url("#{$asset_path}/misc/close-hover.svg");
    background-size: 24px;
    height: 24px;
    width: 24px;
  }

  &:active {
    background-image: url("#{$asset_path}/misc/close-active.svg");
    background-size: 24px;
    height: 24px;
    width: 24px;
  }
}

.menu-favorites-box {
  background-color: $base_color;
}
