@import "../../vars.less";

@button-margin: 1vh;
@button-margin-compact: 1vh;
@button-size: 90vh;
@button-size-compact: 50vh;
@button-background-color: #fff;
@button-hover-color: #40a9ff;
@icon-size: 60vh;
@icon-size-compact: 30vh;
@icon-padding: @icon-size * 0.05;
@text-size: 20vh;
@text-size-compact: 10vh;

.programs__imagebutton .ant-btn {
  flex: 1;
  height: @button-size;
  margin: 0 @button-margin;
  font-weight: bold;
  background: @button-background-color;
}

.programs__imagebutton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: @button-size;
  min-width: @button-size;
  margin: 0 @button-margin;
  font-weight: bold;
  border: 1px solid transparent;
  border-radius: 2px;
  border-color: #d9d9d9;
  background: @button-background-color;
  cursor: pointer;
  overflow: hidden
}

.programs__imagebutton--compact {
  .programs__imagebutton;
  height: @button-size-compact;
  min-width: @button-size-compact;
  margin: 0 @button-margin-compact;
}

.programs__imagebutton .ant-image-img {
  width: auto;
  height: @icon-size;
  pointer-events: none;
}
.programs__imagebutton--compact .ant-image-img {
  .programs__imagebutton .ant-image-img;
  height: @icon-size-compact;
}

.programs__imagebutton .ant-typography {
  width: auto;
  height: @text-size;
  font-size: @text-size;
  line-height: 80%;
  pointer-events: none;
}

.programs__imagebutton--compact .ant-typography {
  .programs__imagebutton .ant-typography;
  height: @text-size-compact;
  font-size: @text-size-compact;
}

.programs__imagebutton--compact:hover,
.programs__imagebutton:hover {
  border-color: @button-hover-color;
  background: @button-background-color;
}

.programs__imagebutton--compact:hover .ant-image-img,
.programs__imagebutton:hover .ant-image-img {
  width: auto;
  padding: @icon-padding;
}

.programs__imagebutton--compact:hover .ant-image,
.programs__imagebutton:hover .ant-image {
  padding: 0 @icon-padding*2;
}

.programs__imagebutton--compact:hover .ant-typography,
.programs__imagebutton:hover .ant-typography {
  color: @button-hover-color;
}