.kone-icon-button{align-items:center;background-color:var(--color-blue-500);border:none;cursor:pointer;display:flex;flex-shrink:0;justify-content:center;position:relative}.kone-icon-button__icon-wrapper{height:100%;position:relative;width:100%}.kone-icon-button__icon-wrapper .kone-icon-button__svg{animation-duration:.3s;animation-fill-mode:forwards;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%, -50%)}.kone-icon-button__icon-wrapper .default,.kone-icon-button__icon-wrapper .hover{opacity:1}.kone-icon-button--icon-arrow-right:hover:not(:disabled) .default{animation:arrow-slide-right-out var(--motion-duration-m) forwards}.kone-icon-button--icon-arrow-right:hover:not(:disabled) .hover{animation:arrow-slide-right-in var(--motion-duration-m) forwards}.kone-icon-button--icon-arrow-right:not(:hover,:disabled) .default{animation:arrow-slide-right-back var(--motion-duration-m) forwards}.kone-icon-button--icon-arrow-right:not(:hover,:disabled) .hover{animation:arrow-slide-right-out-back var(--motion-duration-m) forwards}.kone-icon-button--icon-arrow-left:hover:not(:disabled) .default{animation:arrow-slide-left-out var(--motion-duration-m) forwards}.kone-icon-button--icon-arrow-left:hover:not(:disabled) .hover{animation:arrow-slide-left-in var(--motion-duration-m) forwards}.kone-icon-button--icon-arrow-left:not(:hover,:disabled) .default{animation:arrow-slide-left-back var(--motion-duration-m) forwards}.kone-icon-button--icon-arrow-left:not(:hover,:disabled) .hover{animation:arrow-slide-left-out-back var(--motion-duration-m) forwards}.kone-icon-button--icon-close-cross:hover:not(:disabled) .kone-icon-button__svg{animation:rotate-in var(--motion-duration-m) forwards}.kone-icon-button--icon-close-cross:not(:hover,:disabled) .kone-icon-button__svg{animation:rotate-out var(--motion-duration-m) forwards}.kone-icon-button.small{border-radius:var(--kone-layout-button-primary-border-radius);height:24px;width:24px}.kone-icon-button.small .kone-icon-button__icon-wrapper{padding:8px}.kone-icon-button.small .kone-icon-button__icon-wrapper .kone-icon-button__svg{height:16px;width:16px}.kone-icon-button.medium{border-radius:var(--kone-layout-button-primary-border-radius);height:48px;width:48px}.kone-icon-button.medium .kone-icon-button__icon-wrapper{padding:8px 13px}.kone-icon-button.medium .kone-icon-button__icon-wrapper .kone-icon-button__svg{height:22px;width:22px}.kone-icon-button.large{border-radius:var(--kone-layout-button-primary-border-radius);height:64px;width:64px}.kone-icon-button.large .kone-icon-button__icon-wrapper{padding:8px 20px}.kone-icon-button.large .kone-icon-button__icon-wrapper .kone-icon-button__svg{height:24px;width:24px}.kone-icon-button.primary{color:var(--color-grey-0)}.kone-icon-button.primary:active{background-color:var(--color-blue-350)}.kone-icon-button.primary:disabled,.kone-icon-button.primary[disabled]{background-color:var(--color-grey-250);cursor:not-allowed}.kone-icon-button.primary:disabled .kone-icon-button__svg,.kone-icon-button.primary[disabled] .kone-icon-button__svg{color:var(--color-grey-400)}.kone-icon-button.primary:focus{background-color:var(--color-blue-600);outline:none}.kone-icon-button.primary:hover:not(:disabled){background-color:var(--color-blue-400)}.kone-icon-button.secondary-light-blue{background-color:var(--color-blue-100);border:1px solid rgba(0,0,0,0);color:var(--color-blue-500)}.kone-icon-button.secondary-light-blue:active{background-color:var(--color-blue-150);border-color:var(--color-blue-500)}.kone-icon-button.secondary-light-blue:disabled,.kone-icon-button.secondary-light-blue[disabled]{background-color:var(--color-grey-150);border:none;color:var(--color-grey-400);cursor:not-allowed}.kone-icon-button.secondary-light-blue:focus{background-color:var(--color-blue-200);border-color:var(--color-blue-500);outline:none}.kone-icon-button.secondary-light-blue:hover:not(:disabled){background-color:var(--color-blue-130);border-color:var(--color-blue-500)}.kone-icon-button.secondary-white{background-color:var(--color-grey-0);border:1px solid rgba(0,0,0,0);color:var(--color-blue-500)}.kone-icon-button.secondary-white:active{background-color:var(--color-blue-130);border-color:var(--color-blue-500)}.kone-icon-button.secondary-white:disabled,.kone-icon-button.secondary-white[disabled]{background-color:var(--color-grey-125);border:none;color:var(--color-grey-400);cursor:not-allowed}.kone-icon-button.secondary-white:focus{background-color:var(--color-blue-150);border-color:var(--color-blue-500);outline:none}.kone-icon-button.secondary-white:hover:not(:disabled){background-color:var(--color-blue-100);border-color:var(--color-blue-500)}@keyframes arrow-slide-right-out{0%{transform:translate(-50%, -50%) translateX(0);opacity:1}100%{transform:translate(-50%, -50%) translateX(100%);opacity:0}}@keyframes arrow-slide-right-in{0%{transform:translate(-50%, -50%) translateX(-100%);opacity:0}100%{transform:translate(-50%, -50%) translateX(0);opacity:1}}@keyframes arrow-slide-right-back{0%{transform:translate(-50%, -50%) translateX(100%);opacity:0}100%{transform:translate(-50%, -50%) translateX(0);opacity:1}}@keyframes arrow-slide-right-out-back{0%{transform:translate(-50%, -50%) translateX(0);opacity:1}100%{transform:translate(-50%, -50%) translateX(-100%);opacity:0}}@keyframes arrow-slide-left-out{0%{transform:translate(-50%, -50%) translateX(0);opacity:1}100%{transform:translate(-50%, -50%) translateX(-100%);opacity:0}}@keyframes arrow-slide-left-in{0%{transform:translate(-50%, -50%) translateX(100%);opacity:0}100%{transform:translate(-50%, -50%) translateX(0);opacity:1}}@keyframes arrow-slide-left-back{0%{transform:translate(-50%, -50%) translateX(-100%);opacity:0}100%{transform:translate(-50%, -50%) translateX(0);opacity:1}}@keyframes arrow-slide-left-out-back{0%{transform:translate(-50%, -50%) translateX(0);opacity:1}100%{transform:translate(-50%, -50%) translateX(100%);opacity:0}}@keyframes rotate-in{0%{transform:translate(-50%, -50%) rotate(0deg)}100%{transform:translate(-50%, -50%) rotate(90deg)}}@keyframes rotate-out{0%{transform:translate(-50%, -50%) rotate(90deg)}100%{transform:translate(-50%, -50%) rotate(0deg)}}